reactjs - Safari CSS 仅在单击 text-align: justify 后更新（以沙盒为例）

Question

编辑：短篇小说我做了一个代码沙箱：

https://codesandbox.io/s/928m541rny?fontsize=14

在 Mac版 Safari中打开，如果你稍微拉伸一下窗口，你会看到这个：

如果您单击文本，则证明正确。

---

我在 Safari for mac (12.0.3) 上有一个非常有趣的错误，文本在第一次渲染时没有正确证明（屏幕截图 1），它只有在单击它后才正确证明（屏幕截图 2）。

我正在使用带有 Material-UI 的 React 并直接在我的theme.js文件中覆盖我所有 body2 的样式，如下所示：

body2: {
        textAlign: "justify"
      }

此实现在 Chrome 上正常工作。该字符串来自我的后端，该后端从 google firestore 检索它。新行由\n字符表示。我正在寻找解决此问题但找不到解决方法（如用html 标签替换\n字符）<br />

我尝试了什么：

• 搜索与text-align: justifySafari相关的问题
• 试图玩弄text-justify房产

我实际上不知道在哪里可以解决这个问题，也从来没有遇到过这种错误（点击后更改 css 没有onClick实现任何逻辑。）。这就是我列出这么多标签的原因，因为我暂时没有真正的想法。

点击它后，它正确显示：

附加信息：

          <Typography paragraph>
              {description}
          </Typography>

我也像这样覆盖根排版（如果我不这样做，则不会显示来自 firestore 字符串的新行）：

    MuiTypography: {
      root: {
        whiteSpace: "pre-line"
      },
      body2: {
        fontSize: 15,
        textAlign: "justify"
      }
    },

标签： reactjssafarimaterial-uitext-aligntext-justify