警告:道具"className"不匹配.当将样式化的组件与语义用户界面反应一起使用时 [英] Warning: Prop `className` did not match. when using styled components with semantic-ui-react

问题描述

我使用此代码从顶部使我的按钮边距:

I use this code to margin my Button from top:

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

const MarginButton = makeTopMargin(Button);

，每当我使用 MarginButton 节点时，都会出现此错误:警告:道具 className 不匹配.服务器:带有按钮sc-bwzfXH MjXOI的ui图标左侧"客户端:带有按钮sc-bdVaJa fKCkqX的ui图标左侧"

and whenever i use MarginButton node, I get this error: Warning: PropclassNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

您可以在此处看到它.

我该怎么办?

推荐答案

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

You should install the babel plugin for styled-components and enable the plugin in your .babelrc

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

.babelrc

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

这篇关于警告:道具"className"不匹配.当将样式化的组件与语义用户界面反应一起使用时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！