reactjs - Vad är rätt sätt att åsidosätta färger med MUI withStyle och TypeScript och next.js?

Jag har:

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>
  );
};

och

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

Men om variant är secondary, vill jag i princip byta plats på background och color. Hur går jag tillväga för att göra detta?

Svar #1

Du kan ställa in det i ditt tema. Exemplet nedan är för att använda varianten="contained" med färg="secondary"

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

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

Eller om du vill ställa in stilen i din komponent kan du ställa in en variant för den sekundära på detta sätt. Här är en fungerande 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>