警告：道具 \`className\` 不匹配。当使用带有语义-ui-react 的样式化组件时

Question

我使用此代码从顶部为我的 Button 设置边距：

 const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

每当我使用 MarginButton 节点时，我都会收到此错误： Warning: Prop className did not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

你可以 在这里 看到这个。

我应该怎么办？

原文由 Talha Talip Açıkgöz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过在项目主文件夹中添加一个 .babelrc 文件来修复此警告，该文件包含以下内容：

 {
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

有关示例，请参见以下链接： https ://github.com/nblthree/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc

原文由 C. Molendijk 发布，翻译遵循 CC BY-SA 4.0 许可协议