防止 React 渲染内联样式答案

【问题标题】：Prevent React from rendering inline styles防止 React 渲染内联样式
【发布时间】：2021-09-10 20:03:55
【问题描述】：

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

【问题讨论】：

按钮是另一个自定义类吗？
@Apostolos Button 是另一个自定义组件，是的。但我觉得没关系。如果它是样式化的（按钮），行为将是相同的。
是的，没关系，正确的。检查答案。我创建了一个具有类似 senario 的 sandobx

标签： javascript reactjs styled-components inline-styles css-in-js

【解决方案1】：

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

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

可以举个例子here

【讨论】：

如果您检查 dom 树，您的 codepen 也会呈现“color=highlight”。 <button color="highlight" class="sc-gsTCUz sc-dlfnbm kSuqIw ckOqvP">Hello 2</button>。这会导致我的应用程序出现不可靠的错误。
如果您使用其他属性？而不是颜色，例如colProp?
是的，我正在考虑这个问题。但我不喜欢那个解决方案，我很好奇是否还有其他方法。
我认为你不能以某种方式“删除”类属性，因为它是在你的标签中声明的。这就是为什么我首先询问按钮和按钮的原因。
在我的示例中，虽然颜色已更改。你的具体问题是什么？