防止 React 渲染内联样式

Question

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 中将它们用作道具（在本例中为样式组件）。

React 渲染了这个 HTML，不过：

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 的道具来处理颜色。

Answer 1

设置颜色的正确方法是这样的：

export const CustomButton = styled(Button)`
    color: => ${(props) => colors[props.color]}; 
`

可以展示一个例子here