React TypeScript中使用CSS Modules实现条件样式的报错问题

问题原因 #

你遇到的错误是因为Reset组件没有声明接受className这个props，TypeScript会严格检查组件的属性类型，所以不允许传递未定义的属性。

解决方案 #

情况1：Reset是你自定义的组件

给组件添加className属性的类型定义即可，有两种方式：

• 方式一：显式声明className属性

import React from 'react';

// 定义组件props类型
interface ResetProps {
  className?: string; // 可选属性，允许不传
}

const Reset: React.FC<ResetProps> = ({ className }) => {
  // 将className传递给内部的原生元素
  return <button className={className}>重置</button>;
};

• 方式二：继承原生元素的属性（推荐，支持所有原生button属性）

import React from 'react';

// 继承HTMLButtonElement的所有属性，自动包含className
const Reset: React.FC<React.HTMLAttributes<HTMLButtonElement>> = ({ className, ...restProps }) => {
  return <button className={className} {...restProps}>重置</button>;
};

情况2：Reset是第三方组件

• 先查看组件官方文档，确认它是否有自定义类名的传入属性（比如部分组件会用class、wrapperClass等替代className），按文档要求传递即可。
• 如果组件确实不支持自定义类名，可以在外层包裹一个容器元素，把类名加在容器上：

<div className={resetVisible ? styles.reset_visible : ''}>
  <Reset />
</div>

内容的提问来源于stack exchange，提问作者user18515181