用 MUI withStyle 和 TypeScript 和 next.js 覆盖 colored颜色的正确方法是什么

发布于08月11日

我有:

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

和

const useStyles = makeStyles(() => ({
  buttonBase: {
    background:'#000000',
    color: '#ffffff',

However, if variant is secondary, I want to basically swap the background 和 color. How do I go about doing this?

推荐答案

你可以在你的主题中设置它. 下面的示例用于将VARIANT="CONTAINED"与COLOR="SERVICE"一起使用

export const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        containedSecondary: {
          backgroundColor: '#808080',
          color: '#FFFFFF',
          '&:hover': {
            backgroundColor: '#565656',
          },
        },
      }
    }
  }

<Button variant="contained" color="secondary">Test button</Button>

或者，如果您想要在组件中设置样式，您可以为次要组件设置一个变量，如下所示.这是一张codesandbox英镑的工作钞票

const useStyles = makeStyles({
  primary: {
    backgroundColor: "purple",
    color: "#FFF"
  },
  secondary: {
    backgroundColor: "red",
    color: "#FFF"
  }
});

<Button className={classes.secondary}>Secondary</Button>
<Button className={classes.primary}>Primary</Button>