在 react + typescript 项目中，可通过类型扩展（`react.htmlattributes`）安全地支持自定义 html 属性，并结合 css 属性选择器实现语义化样式控制，兼顾类型安全与原生 css 能力。

在纯 HTML/CSS 中，我们常利用属性选择器（如 div[color="red"]）为带自定义属性的元素设置样式。但在 React 中，JSX 的

默认不接受非标准属性（如 color="red"），直接使用会触发 TypeScript 类型错误或运行时警告。幸运的是，TypeScript 提供了灵活的类型合并机制，让我们既能保留标准 DOM 属性的完整类型支持，又能安全注入自定义属性。

✅ 正确实现方式：类型交叉扩展

通过将自定义 props 类型与 React.HTMLAttributes 交叉，可构建一个既约束 color 值又兼容所有原生

属性的组件：

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>
);

⚠️ 注意：color={color} 是关键——它将 color 作为 HTML 属性写入 DOM，使 CSS 属性选择器生效；而 ...rest 确保 className、style、onClick 等标准属性仍可正常使用。

? 配套 CSS（需全局或 CSS-in-JS 支持）

div[color='red'] {
  color: #f00;
  font-weight: bold;
}

div[color='yellow'] {
  color: #ff0;
  text-shadow: 1px 1px 0 #000;
}

使用示例：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

<Colored color="red" className="my-div" style={{ margin: '8px' }} />
<Colored color="yellow" onClick={() => alert('Clicked!')} />

⚠️ 注意事项与最佳实践

• 避免污染 DOM：虽然 color 属性合法（HTML5 允许自定义 data-* 属性，但非 data-* 属性需确保无冲突），更推荐使用 data-color（如 data-color="red"）以符合规范，此时 CSS 选择器应改为 div[data-color="red"]；
• 性能考量：属性选择器本身性能良好，但若需动态主题或大量变体，建议改用 className + CSS Modules 或 style 对象，便于 SSR 和 DevTools 调试；
• 可访问性：纯靠 color 属性无法传递语义，视觉样式应辅以 aria-label 或文本内容明确状态（本例中 {color} 已满足）；
• 替代方案对比：
  • ✅ 推荐：className={color === 'red' ? 'text-red' : 'text-yellow'} —— 更符合 React 惯例，利于 CSS 优化；
  • ⚠️ 谨慎：内联 style={{ color: color === 'red' ? 'red' : 'yellow' }} —— 动态样式易维护，但失去 CSS 伪类、动画等能力。

综上，可以且合理地使用属性选择器 + 类型扩展，尤其适用于低耦合、高复用的原子组件（如图标、标签、状态徽章）。只要类型严谨、属性命名规范（优先 data-*）、CSS 可维护，这就是一种兼具表现力与工程健壮性的优雅方案。