reactjs - Aký je správny spôsob, ako predefinovať farby pomocou MUI withStyle, TypeScript a next.js?

Mám:

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

a

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

Avšak, ak je variant secondary, chcem v podstate vymeniť background a color. Ako to môžem urobiť?

Odpoveď č. 1

Môžete to nastaviť vo svojej téme. Nižšie uvedený príklad je pre použitie variant="contained" s 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>

Alebo ak chcete nastaviť štýl vo vašej súčasti, môžete nastaviť variant pre sekundárny takto. Tu je funkčný 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>