警告：道具“className”不匹配。当将样式化组件与语义-ui-react一起使用时

我使用此代码将按钮从顶部留出边距：

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

const MarginButton = makeTopMargin(Button);

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

你可以看到这个生成的here https://codesandbox.io/s/xvmq9jjzzq.

我应该怎么办？

或者您可以将其添加到您的next.config.js。这也使得它如此next-swc (快速网络编译器 https://github.com/swc-project/swc）致力于减少构建时间。看更多这里 https://github.com/vercel/next.js/discussions/30174.

// next.config.js
module.exports = {
  compiler: {
    // Enables the styled-components SWC transform
    styledComponents: true
  }
}