如何使用 mui 为可重复使用的 React 按钮应用不同的样式

Answer 1

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

如果您知道自己只会有这两种变体，那么您可能希望将这些样式烘焙到组件中，并让它们在道具上切换。下面是一个例子，但这不一定更好，只是另一种方法。

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

然后将使用变体属性来调用：

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

这更清楚地表明存在两个明确定义的变体。