问题描述
const Component = () => <CustomButton color="highlight">Click me</CustomButton>;
const colors = { highlight: "#123456" };
export const CustomButton = styled(Button)`
${({ props }) =>
color: ${colors[props.color]}};
`;
如何防止 React 表单将“color="highlight”渲染为第 1 行中的内联样式?
我有时会使用 CSS 命名属性在 JS 库中的 CSS 中将它们用作道具(在本例中为样式组件)。
color="highlight"
不是有效的 HTML 并且不显示颜色。
由于 color="highlight
呈现为内联样式,我的样式化组件样式表不再起作用并且样式已损坏。
正确的输出应该是
// no inline styles applied
<button class="sc-crzoAe dV0xyD sc-cTJkRt jDcPXG" />
// corresponding style sheet class
.sc-crzoAe {
color: #123456;
}
请记住,React 处理一些 CSS 属性,例如 width
、height
作为 style={{ width: "100%",height: "50%" }}
的快捷方式。我认为这就是行为的来源。
我的一个想法是重命名道具,但最好有一个名为 color
的道具来处理颜色。
解决方法
设置颜色的正确方法是这样的:
export const CustomButton = styled(Button)`
color: => ${(props) => colors[props.color]};
`
可以展示一个例子here