一 问题描述

        在项目中，自定义了一个组件，分别在界面和 antd的modal中都有使用到。但是突然发现，界面中的组件样式跟modal中的组件样式高度不一样。modal中的组件整体要比页面中的组件要高一点。

        项目中的自定义组件比较复杂，因此，自己写了一个简单的测试功能，如下所示：

如上图，可以看到，常规div的样式整体比modal中的div要矮一点（差别不是特别大）。

二 问题原因

       测试程序比较简单，因此可以很容易发现是行高不一致导致的。查了antd官网才看到，antd的modal中的文本自己设置了行高（lineHeight），因此modal中的组件会整体高一些（antd官网上，modal的默认文本行高为1.5714285714285714）。而自己自定义的组件中没有设置文本行高。这就是导致组件高度在html和modal中不一致的根本原因。

三 解决办法 

        给自定义组件文本添加固定的行高（lineHeight）。

四 测试代码如下 

import React, {useState} from "react";
import {Button, Divider, Modal} from "antd";

export default () => {
  const [open, setOpen] = useState(false);

  const testDiv = <div
    style={{
      color: "white",
      width: 200,
      backgroundColor: "rgba(51, 119, 255, 1)",
      fontSize: 14,
      lineHeight: 1
    }}>这是一行用于测试的文字</div>

  return (
    <div style={{height: 820, padding: 20}}>
      <Button type={"primary"} onClick={() => setOpen(true)}>
        打开弹窗
      </Button>
      <Divider/>
      <div>
        {testDiv}
      </div>

      <Modal open={open} onCancel={() => setOpen(false)}>
        {testDiv}
      </Modal>
    </div>
  );
}