Reactjs 如何使用mui为可重复使用的react 按钮应用不同的风格

目前看起来是一个不错的方法，因为它允许灵活性和可扩展性，以防您将来想使用additionalStyles程序添加更多样式.

不过，如果您知道您只会拥有这两种变体，您可能想将这些样式烘焙到组件中，并让它们打开props .下面是一个示例，但这不一定更好，只是另一种方法.

export const MainButton = ({ title, variant }: MainButtonProps) => {
  const theme = useTheme();

  const defaultStyles = {
    height: 40,
    textTransform: "none",
    fontSize: 15,
    fontWeight: 600,
    borderRadius: 2,
  };

  const primaryStyles = {
    bgcolor: theme.palette.secondary.main,
    color: "#ffffff",
    "&:hover": {
      bgcolor: "#2eab5c",
    },
  };

  const secondaryStyles = {
    backgroundColor: "#e5f3fd",
    color: "#33b864",
    border: `1px solid ${theme.palette.secondary.main}`,
    "&:hover": {
      backgroundColor: "rgba(46, 171, 92, 0.1)",
    },
  };

  const styles = variant === 'secondary' ? { ...defaultStyles, ...secondaryStyles } : { ...defaultStyles, ...primaryStyles };

  return (
    <Button sx={styles}>
      {title}
    </Button>
  );
};

然后将使用变体props 来调用:

<MainButton title="Login" />
<MainButton title="Register" variant="secondary" />

这更清楚地表明有两个明确定义的变体.