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

此代码工作正常，它创建具有相应颜色的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

prop名称更改为类似

divColor

的其他名称时，它不会显示为DOM属性。我知道，当道具与本地HTML属性具有相同名称时，它们会显示为HTML属性，但

color

不应显示，因为它不是有效的HTML属性

---

为什么会出现这种行为？

有一组HTML属性，它允许将这些属性传递给结果元素。

color

属性在技术上对

div

元素无效，但是它是一个HTML属性，这是它遵循的标准

发件人：

如果样式化目标是一个简单元素（例如styled.div），则样式化组件将通过任何已知的HTML属性传递给DOM。如果它是一个定制的React组件（例如，styled（MyComponent）），那么styled组件将通过所有道具

文档没有明确说明它们接受任何元素上的任何属性，但是给出了以下示例：

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

我的div

结果：

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

我的div

---

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

有一组HTML属性，它允许将这些属性传递给结果元素。

color

属性在技术上对

div

元素无效，但是它是一个HTML属性，这是它遵循的标准

发件人：

如果样式化目标是一个简单元素（例如styled.div），则样式化组件将通过任何已知的HTML属性传递给DOM。如果它是一个定制的React组件（例如，styled（MyComponent）），那么styled组件将通过所有道具

文档没有明确说明它们接受任何元素上的任何属性，但是给出了以下示例：

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

我的div

结果：

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

我的div

---

---

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

虽然技术上无效，但浏览器似乎并不在意。在

数据出现之前-

属性使用自定义属性并不少见。我不会担心的。Angular和Vue等框架中使用的属性中包含各种时髦的东西，我并不担心，这在我看来是不合逻辑的。我喜欢React生成干净的HTML（例如与角度选择器相比），我想知道我是否遗漏了什么，或者这只是这个库的一个bug。bug还是方便？我已经很长时间没有使用这个库了，但它似乎在检查元素时很有用。怀疑这是一个好问题，我的实际问题是：它与像

文本装饰：下划线这样的东西有什么关系？或者可能是
textdearching:underline
，虽然技术上无效，但浏览器似乎并不在意。在
数据出现之前-
属性使用自定义属性并不少见。我不会担心的。Angular和Vue等框架中使用的属性中包含各种时髦的东西，我并不担心，这在我看来是不合逻辑的。我喜欢React生成干净的HTML（例如与角度选择器相比），我想知道我是否遗漏了什么，或者这只是这个库的一个bug。bug还是方便？我已经很长时间没有使用这个库了，但它似乎在检查元素时很有用。怀疑这是一个好问题，我的实际问题是：它与像
文本装饰：下划线这样的东西有什么关系？或者可能是
text装饰：下划线
确切的规则是什么？有效的HTML和CSS属性？颜色属性在技术上对div元素无效这是真的那么为什么会出现？我已经编辑了我的答案，以包含来自官方文档的引用。我不知道你所说的“CSS属性”是什么意思-你是说
样式
属性吗？我的意思是
颜色
作为HTML属性无效，但作为CSS属性有效
颜色
属性是有效的HTML属性，属于
font
标记。实际上，HTMLFontElement.prototype==true中的
'color'是否意味着所有有效的HTML属性都会出现，而不管实际的元素是什么？确切的规则是什么？有效的HTML和CSS属性？颜色属性在技术上对div元素无效这是真的那么为什么会出现？我已经编辑了我的答案，以包含来自官方文档的引用。我不知道你所说的“CSS属性”是什么意思-你是说
样式
属性吗？我的意思是
颜色
作为HTML属性无效，但作为CSS属性有效
颜色
属性是有效的HTML属性，属于
font
标记。实际上，HTMLFontElement.prototype==true中的
'color'是否意味着所有有效的HTML属性都会出现，而不管实际的元素是什么？