styled-components部分props被渲染到HTML标签的判定规则是什么？

核心判定规则 #

1. 带$前缀的属性（临时属性） #

所有名称以$开头的属性，会被styled-components统一识别为仅样式使用的临时属性，绝对不会透传给底层DOM元素，也不会出现在最终生成的HTML代码中，这是避免非预期属性透传最稳妥的方案。
示例用法：

const Container = styled.div`
  display: flex;
  flex-direction: ${props => props.$direction};
  flex: ${props => props.$flex};
`;

// 调用时传入带$前缀的属性
<Container $direction="column" $flex="2">

2. 不带$前缀的属性 #

这类属性的透传逻辑分两步判定：

• 第一步：如果属性属于React DOM原生属性白名单（包括所有HTML标准属性、aria-*、data-*等），无论是否在样式中使用，都会直接透传给底层DOM元素。
• 第二步：如果属性不在原生属性白名单内，分两种场景：
  • 若styled组件绑定的是自定义React组件：所有属性都会直接透传给该自定义组件，无额外过滤。
  • 若styled组件绑定的是HTML原生标签（如div/span等）：只要该属性在样式插值中被使用，styled-components就不会主动过滤，会直接透传到DOM中——这就是direction、nested等非原生属性仍然出现在最终HTML中的原因。

警告触发逻辑差异 #

部分非原生属性透传时会触发控制台警告，部分不会，本质是React的校验规则导致：

• 若透传的非原生属性不符合data-*/aria-*命名规范，React会抛出无效属性警告。
• 不同版本的styled-components和React对属性校验的严格程度不同，部分全小写的单单词非标准属性可能不会触发警告。

最佳实践 #

所有仅用于控制样式、不需要传递给底层DOM或自定义组件的属性，统一添加$前缀，从根源避免非预期透传和控制台警告问题。

内容的提问来源于stack exchange，提问作者marcus-linmarkson