CSS 属性选择器在 JSX 中与 TypeScript 的正确用法

在 react + typescript 项目中，若想复用 html 属性选择器（如 `[color="red"]`）的语义化写法，需通过类型扩展让自定义组件支持原生 dom 属性，同时保持类型安全与样式可维护性。

在纯 HTML/CSS 中，我们可以直接使用自定义属性（如 color="red"）配合属性选择器 div[color="red"] 实现样式映射。但在 React JSX 中，

会触发 TypeScript 类型错误——因为标准 HTMLDivElement 接口不包含 color 属性，React 会拒绝未知 prop。

✅ 正确解法：类型合并（Intersection Type） + 展开 props

通过将业务专属属性（如 color: "red" | "yellow"）与原生 HTML 属性类型 React.HTMLAttributes 合并，我们既能约束必传且有限值的 color，又能透传所有合法 div 属性（如 className, style, id, onClick 等）：

import React, { FC } from 'react';

type ColoredProps = {
  color: 'red' | 'yellow';
} & React.HTMLAttributes;

const Colored: FC = ({ color, ...props }) => (
  
    {color}
  
);

这样调用完全合法且类型安全：

 alert('Yellow!')} />

⚠️ 注意事项：

• 不要滥用自定义 HTML 属性：color 在此场景中是语义化业务标识（非 CSS 颜色值），而非标准 HTML 属性。若仅用于样式控制，更推荐使用 className 或 style 直接绑定，避免混淆；
• CSS 层面仍需对应属性选择器：为使 div[color="red"] 生效，样式必须写在全局 CSS 或 CSS-in-JS 中（如
• 替代方案更推荐（进阶建议）：
  • ✅ 使用 className + BEM/语义类名：，配合 .colored--red { color: red; } —— 更符合 React 惯例，利于 SSR 和工具链优化；
  • ✅ 使用 style 动态内联：goldenrod' }}> —— 零 CSS 文件依赖，适合简单场景；
  • ❌ 避免 data-color 等 data-* 属性做样式驱动 —— 虽合法但偏离语义，且增加选择器复杂度（需写 div[data-color="red"]）。

  总结：技术上可通过类型交集实现属性选择器兼容，但工程实践中应优先选择 className 或 style 方案——它们更契合 React 的声明式范式、具备更好的可维护性与生态兼容性。