reactjs - 将样式组件与语义 UI react 一起使用时出现警告 : Prop `className` did not match.

Question

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

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

const MarginButton = makeTopMargin(Button);

每当我使用 MarginButton 节点时，我都会收到此错误:警告:PropclassName不匹配。服务器:“ui 图标左标记按钮 sc-bwzfXH MjXOI” 客户端:“ui 图标左标记按钮 sc-bdVaJa fKCkqX”

你可以看到生成的here .

我应该做什么？

Answer 1

或者您可以将其添加到 next.config.js 中。这也使得 next-swc ( speedy web compiler ) 可以减少构建时间。请参阅more here .

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