reactjs - 使用 MUI withStyle 和 TypeScript 以及 next.js 覆盖颜色的正确方法是什么？

Question

我有:

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',

但是，如果 variant 是 secondary，我想基本上交换 background 和 color。我该怎么做？

Answer 1

你可以在你的主题中设置它。下面的例子是使用 variant="contained"with color="secondary"

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>