为什么颜色在div上显示为HTML属性

Question

这段代码工作得很好，它创建了具有相应颜色的CSS类，并动态应用这些类：

const Div = styled.div`
color: ${({ color }) => color};
`;
export default function Email() {
const [color, changeColor] = useState();
return (
<>
<Div color={color}>Email</Div>
{['red', 'palevioletred', 'blue', 'yellow'].map(x => <button onClick={() => changeColor(x)}>{x}</button>)}
</>
)
}

但是，color属性出现在div元素的DOM中：

<div class="sc-crHlIS jxntNS" color="yellow">Email</div>

当我将color道具名称更改为类似divColor的其他名称时，它不会显示为DOM属性。我知道，当道具与原生HTML属性同名时，它们会显示为HTML属性，但color不应该出现，因为它不是有效的HTML属性。

为什么会有这种行为？

Answer 1

样式化组件有一组HTML属性，可以将这些属性传递给生成的元素。color属性在技术上对div元素无效，但它是HTML属性，这是它遵循的标准。

来自文档：

如果样式化的目标是一个简单元素(例如，styleed.div(，则样式化的组件将通过任何已知的HTML属性传递到DOM。如果它是一个自定义的React组件(例如样式化的(MyComponent((，则样式化的组件会通过所有道具。

文档没有明确声明他们接受任何元素上的任何属性，但在给定的示例中似乎是这样：

<Div color="red" foo="foo" value="value" name="name" bar="bar">My div</Div>

结果：

<div color="red" value="value" name="name">My div</div>

请注意，非HTML属性是如何被删除的，但其他属性仍然存在。