一 问题描述
在项目中，自定义了一个组件，分别在界面和 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 = <divstyle={{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>);
}
