我使用以下代码从顶部开始对Button进行边距处理:
const makeTopMargin = (elem) => {
return styled(elem)`
&& {
margin-top: 1em !important;
}
`;
}
const MarginButton = makeTopMargin(Button);
每当我使用MarginButton
节点时,都会出现此错误:Warning: Prop
classNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"
您可以在此处看到生成的内容。
我该怎么办?
PropType错误是运行时错误,它将使您知道预期传递给prop的数据不是预期的。当组件在服务器上呈现,然后在客户端的DOM中呈现时,在组件上设置的className属性看起来并不相同。
由于看起来您正在使用服务器端渲染,因此需要确保您的类名称是确定性的。该错误向您显示了由
styled-components
服务器上的库创建的类以及它与DOM有何不同。对于通常没有确定性类名的库,您需要查看高级配置。看一下样式化组件文档中有关SSR的特异性。