警告：道具“ className”不匹配。当使用带样式的组件和语义用户界面反应时

reactjs React.js

卡卡西Near

2020-03-23

我使用以下代码从顶部开始对Button进行边距处理：

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

const MarginButton = makeTopMargin(Button);

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

您可以在此处看到生成的内容。

我该怎么办？

第2953篇《警告：道具“ className”不匹配。当使用带样式的组件和语义用户界面反应时》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
飞云 2020.03.23

PropType错误是运行时错误，它将使您知道预期传递给prop的数据不是预期的。当组件在服务器上呈现，然后在客户端的DOM中呈现时，在组件上设置的className属性看起来并不相同。

由于看起来您正在使用服务器端渲染，因此需要确保您的类名称是确定性的。该错误向您显示了由styled-components服务器上的库创建的类以及它与DOM有何不同。对于通常没有确定性类名的库，您需要查看高级配置。看一下样式化组件文档中有关SSR的特异性。

JinJin 2020.03.23

您应该为样式组件安装babel插件，并在.babelrc中启用该插件

npm install --save-dev babel-plugin-styled-components

.babelrc

{
  "plugins": [
    [
      "babel-plugin-styled-components"
    ]
  ]
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android