在MUI、TypeScript和Next.js中正确覆盖按钮变体颜色的方法

这里有两种简洁的实现方式，适配你用Material-UI makeStyles的场景：

方法一：给样式函数传递variant参数 #

直接在makeStyles的样式定义中接收variant属性，动态生成对应样式：

样式代码修改： #

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({
  buttonBase: ({ variant }: { variant: 'primary' | 'secondary' }) => ({
    // 基础公共样式（比如内边距、圆角等）
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    // 根据variant切换背景和文字色
    background: variant === 'primary' ? '#000000' : '#ffffff',
    color: variant === 'primary' ? '#ffffff' : '#000000',
    // 可选：disabled状态样式
    '&:disabled': {
      opacity: 0.6,
      cursor: 'not-allowed',
    },
  }),
}));

组件代码修改： #

调用useStyles时传入当前的variant值：

const Button: React.FC<ButtonProps> = ({
  label,
  size,
  variant = 'primary',
  disabled = false,
}: ButtonProps) => {
  // 传入variant参数给样式函数
  const classes = useStyles({ variant });
  return (
    <MaterialButton
      className={`${classes.buttonBase} size-${size}`}
      disabled={disabled}
    >
      {label}
    </MaterialButton>
  );
};

方法二：用条件类名切换样式 #

定义基础样式和secondary变体样式，通过条件判断添加类名（推荐用clsx处理条件类，避免字符串拼接的潜在问题）：

先安装clsx（如果没装的话）： #

npm install clsx
# 或者
yarn add clsx

样式代码修改： #

const useStyles = makeStyles(() => ({
  buttonBase: {
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
    // primary默认样式
    background: '#000000',
    color: '#ffffff',
    '&:disabled': {
      opacity: 0.6,
      cursor: 'not-allowed',
    },
  },
  // secondary变体样式，覆盖基础样式
  secondaryVariant: {
    background: '#ffffff',
    color: '#000000',
    // 可选：如果需要边框，这里可以加border: '1px solid #000'
  },
}));

组件代码修改： #

import clsx from 'clsx';

const Button: React.FC<ButtonProps> = ({
  label,
  size,
  variant = 'primary',
  disabled = false,
}: ButtonProps) => {
  const classes = useStyles();
  return (
    <MaterialButton
      // 用clsx组合类名：基础类 + 尺寸类 + 条件变体类
      className={clsx(
        classes.buttonBase,
        `size-${size}`,
        variant === 'secondary' && classes.secondaryVariant
      )}
      disabled={disabled}
    >
      {label}
    </MaterialButton>
  );
};

额外提示 #

• 确保你的ButtonProps类型定义中，variant的类型是'primary' | 'secondary'，避免传入无效值：

  interface ButtonProps {
    label: string;
    size: string; // 可以更具体，比如'small' | 'medium' | 'large'
    variant?: 'primary' | 'secondary';
    disabled?: boolean;
  }
  

• 如果需要支持更多变体，方法一的扩展性会更好，只需要在样式函数的条件判断中新增分支即可。

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