React 字体真棒图标在生产中更大

Posted 2023-02-21

【中文标题】React 字体真棒图标在生产中更大

【英文标题】：React Font Awesome Icons Bigger in Production

【发布时间】：2021-12-17 22:39:21

【问题描述】：

最近我们的 react 构建产生了不同的视觉效果。

开发

生产

如您所见，最左侧的一个图标大小正确，但其他图标几乎是两倍。所有这些图标都使用 Material UI Icon 按钮和字体很棒的图标

其中一个图标的示例

        <IconButton
          style= minWidth: '0px' 
          color="default" 
          component=Button
          onClick=openModal
        >
          <FontAwesomeIcon icon=faLink />
        </IconButton>

你们知道为什么生产版本的尺寸会发生变化吗？

编辑#1

Material UI 类 .MuiButton-root 和 .MuiIconButton-root 正在改变 dev 和 prod 之间的优先级

编辑#2

检查样式 开发

检查样式 生产

如您所见，dev 和 prod 之间的类具有不同的优先级。

【问题讨论】：

浏览器开发工具应该准确地告诉你它们的大小

【参考方案1】：

您可以尝试使用 fa-sm 等强制字体真棒图标的大小，看看它是否仍在发生。

点赞<i class="fas fa-camera fa-sm"></i>

另一种可能的解决方法是通过自定义 CSS 设置图标的大小。

例如这样的：

.fa-camera
  font-size: 0.73em;

【讨论】：

这应该可行，我可以将其作为一种解决方法，但我更关心为什么这些材料类会改变优先级。

@BOT_Billy 您是否在您的 body-tag 中使用任何自定义 CSS？如果是这样，请分享您的代码。