在 react + typescript 项目中，可通过类型扩展（`react.htmlattributes`）安全地支持自定义 html 属性，并结合 css 属性选择器实现语义化样式控制，兼顾类型安全与原生 css 能力。
在纯 HTML/CSS 中，我们常利用属性选择器（如 div[color="red"]）为带自定义属性的元素设置样式。但在 React 中，JSX 的
✅ 正确实现方式：类型交叉扩展
通过将自定义 props 类型与 React.HTMLAttributes ⚠️ 注意：color={color} 是关键——它将 color 作为 HTML 属性写入 DOM，使 CSS 属性选择器生效；而 ...rest 确保 className、style、onClick 等标准属性仍可正常使用。 使用示例： 立即学习“前端免费学习笔记（深入）”； 综上，可以且合理地使用属性选择器 + 类型扩展，尤其适用于低耦合、高复用的原子组件（如图标、标签、状态徽章）。只要类型严谨、属性命名规范（优先 data-*）、CSS 可维护，这就是一种兼具表现力与工程健壮性的优雅方案。import React, { FC } from 'react';
type ColoredProps = {
color: 'red' | 'yellow';
} & React.HTMLAttributes<HTMLDivElement>;
const Colored: FC<ColoredProps> = ({ color, ...rest }) => (
<div {...rest} color={color}>
{color}
</div>
);? 配套 CSS（需全局或 CSS-in-JS 支持）
div[color='red'] {
color: #f00;
font-weight: bold;
}
div[color='yellow'] {
color: #ff0;
text-shadow: 1px 1px 0 #000;
}<Colored color="red" className="my-div" style={{ margin: '8px' }} />
<Colored color="yellow" onClick={() => alert('Clicked!')} />⚠️ 注意事项与最佳实践
