如何在导入React自定义Button组件时通过className修改样式？

解决方案 #

你直接传入className报错的核心原因是两点：一是Props类型定义中未声明className字段触发TS类型报错；二是组件内部没有接收传入的className并挂载到原生button标签上。按照以下步骤修改即可：

1. 调整Props接口定义 #

在原有Props类型中新增可选的className字段，后续可逐步删除不需要的CSS透传类属性：

export interface Props {
  // 保留核心业务属性
  name?: string;
  onClick?: () => void;
  // 新增自定义类名字段
  className?: string;
  // 后续可逐步删除backgroundColor、width这类CSS透传属性
}

2. 组件内部合并默认类名与自定义类名 #

接收className参数，将其与默认的myButton类名合并后挂载到button标签上，原有style逻辑可暂时保留方便迁移：

export const Button: React.FC<Props> = ({
  name,
  onClick,
  className,
  // 后续逐步删掉下面这些CSS透传参数
  backgroundColor,
  color,
  border,
  ...rest
}) => {
  return (
    <button
      // 合并类名，没传自定义className时仅保留默认类名
      className={`myButton ${className || ''}`}
      // 原有style逻辑可暂留，全量迁移完样式后删除即可
      style={{
        background: backgroundColor,
        color: color,
        border: border,
        // 其余原有style属性保持不变
      }}
      onClick={onClick}
    >
      {name}
    </button>
  );
};

3. 业务页面使用示例 #

在导入Button的页面定义自定义样式类，传入给组件即可：

// 业务组件中引入
import Button from './Button';
import './ProjectPage.css';

// 页面内调用
<Button
  className="add-team-btn"
  name="Add a team member + "
  onClick={() => {}}
/>
<Button
  className="submit-project-btn"
  name="Submit Project"
/>

对应页面的ProjectPage.css样式：

/* 自定义样式权重足够时会覆盖Button.css中.myButton的默认样式 */
.add-team-btn {
  background: white;
  border: 1px solid #595959;
  width: 100%;
  color: #595959;
  font-weight: 200;
  height: 52px;
  margin-bottom: 25px;
}

.submit-project-btn {
  width: 13%;
  border: none;
  color: #FFFFFF;
}

注意事项 #

如果自定义样式未生效，调整CSS权重即可：默认.myButton和自定义类的权重相同，只要自定义样式的引入顺序晚于Button.css就会覆盖默认样式，也可以通过组合选择器.myButton.add-team-btn提高权重保证生效。

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