在 react + typescript 项目中，若想复用 html 属性选择器（如 `[color="red"]`）的语义化写法，需通过类型扩展让自定义组件支持原生 dom 属性，同时保持类型安全与样式可维护性。
在纯 HTML/CSS 中，我们可以直接使用自定义属性（如 color="red"）配合属性选择器 div[color="red"] 实现样式映射。但在 React JSX 中，<div color="red"> 会触发 TypeScript 类型错误——因为标准 HTMLDivElement 接口不包含 color 属性，React 会拒绝未知 prop。
✅ 正确解法：类型合并（Intersection Type） + 展开 props
通过将业务专属属性（如 color: "red" | "yellow"）与原生 HTML 属性类型 React.HTMLAttributes<HTMLDivElement> 合并，我们既能约束必传且有限值的 color，又能透传所有合法 div 属性（如 className, style, id, onClick 等）：
import React, { FC } from 'react';
type ColoredProps = {
color: 'red' | 'yellow';
} & React.HTMLAttributes<HTMLDivElement>;
const Colored: FC<ColoredProps> = ({ color, ...props }) => (
<div {...props}>
{color}
</div>
);这样调用完全合法且类型安全：
立即学习“前端免费学习笔记（深入）”；
<Colored color="red" className="highlight" style={{ fontSize: '1.2rem' }} />
<Colored color="yellow" id="warning-box" onClick={() => alert('Yellow!')} />⚠️ 注意事项：
- 不要滥用自定义 HTML 属性：color 在此场景中是语义化业务标识（非 CSS 颜色值），而非标准 HTML 属性。若仅用于样式控制，更推荐使用 className 或 style 直接绑定，避免混淆；
- CSS 层面仍需对应属性选择器：为使 div[color="red"] 生效，样式必须写在全局 CSS 或 CSS-in-JS 中（如 <style> 标签或 createGlobalStyle），因为 CSS Modules 默认局部作用域，不支持属性选择器匹配；
-
替代方案更推荐（进阶建议）：
- ✅ 使用 className + BEM/语义类名：<div className={colored--${color}}>，配合 .colored--red { color: red; } —— 更符合 React 惯例，利于 SSR 和工具链优化；
- ✅ 使用 style 动态内联：<div style={{ color: color === 'red' ? 'red' : 'goldenrod' }}> —— 零 CSS 文件依赖，适合简单场景；
- ❌ 避免 data-color 等 data-* 属性做样式驱动 —— 虽合法但偏离语义，且增加选择器复杂度（需写 div[data-color="red"]）。
总结：技术上可通过类型交集实现属性选择器兼容，但工程实践中应优先选择 className 或 style 方案——它们更契合 React 的声明式范式、具备更好的可维护性与生态兼容性。
