Styled Components中临时属性（Transient Props）的作用及美元符号疑问

一、临时属性的核心作用 #

• 过滤无效DOM属性：给Styled Components组件传递自定义属性时，若不加$前缀，这些属性会被默认传递到底层DOM元素（比如示例里的<a>标签）。但多数自定义属性并非标准HTML属性，会被浏览器当作无效属性渲染在DOM上，既冗余又可能引发兼容性问题。带$前缀的临时属性会被Styled Components自动过滤，不会出现在最终的DOM节点中。
• 区分属性用途：$前缀能清晰标记哪些是仅用于样式逻辑的属性，哪些是要传递给底层DOM的原生属性，提升代码可读性和维护性，避免后期混淆业务属性与DOM属性。

二、为什么移除美元符号代码还能运行？ #

去掉$后代码正常运行的原因很简单：

1. 浏览器对非标准属性容错性高，即便<a>标签上出现isActive这类非标准属性，页面不会报错，样式逻辑也能正常读取属性值。
2. Styled Components不会阻止你传递无前缀的自定义属性，只是会原样输出到DOM上，但这种做法属于隐性的冗余DOM属性，并不规范。

直观对比示例 #

带$临时属性的DOM输出： #

<a key="0" href="xxx">xxx</a>

不带$的DOM输出： #

<a key="0" isActive="true" href="xxx">xxx</a>

能明显看到，不带$的isActive被当作无用的DOM属性渲染出来了，而它原本只是用来控制样式的，完全没必要暴露在DOM中。

内容的提问来源于stack exchange，提问作者Alex Alex