如何将自定义样式传递给 MUI V5 样式组件？

Question

使用 MUI V5，如何将自定义样式传递给按钮组件？这是我一直在尝试将旧方式与新的 MUI v5 合并但它不起作用的方法。

import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";
import React from "react";

const StyledButton = styled(Button)(({ theme }) => ({
  root: {
    minWidth: 0,
    margin: theme.spacing(0.5),
  },
  secondary: {
    backgroundColor: theme.palette.secondary.light,
    "& .MuiButton-label": {
      color: theme.palette.secondary.main,
    },
  },
  primary: {
    backgroundColor: theme.palette.primary.light,
    "& .MuiButton-label": {
      color: theme.palette.primary.main,
    },
  },
}));

export default function ActionButton(props) {
  const { color, children, onClick } = props;

  return (
    <Button
      className={`${StyledButton["root"]} ${StyledButton[color]}`}
      onClick={onClick}
    >
      {children}
    </Button>
  );
}

现在我想调用这个按钮并给它 color="secondary"

import ActionButton from "./ActionButton";
import { Close } from "@mui/icons-material";
export default function Header() {
    return (
       <ActionButton color="secondary">
            <Close />
       </ActionButton>  
     
   )
}

Answer 1

看起来您的代码试图从使用 makeStyles/useStyles 的代码迁移，但 styled 的工作方式却大不相同。您不能使用它来生成多个 CSS 类，如 makeStyles 所做的（StyledButton["root"] 和 StyledButton[color] 将是 undefined）。 styled 将生成一个 CSS 类，然后在 className 属性中传递给被包装的组件（例如 Button）。无需尝试使用逻辑创建多个 CSS 类来决定应用哪个类，使用 styled 您可以利用道具（例如 color 道具）在生成的单个 CSS 类中生成动态样式。

下面是一个我认为可以达到您的代码目标效果的示例。我的示例对 MuiButton-label 没有任何作用，因为该类在 v5 中不存在（并且该类在 v4 中的 <button 中应用到的 <span> 也不存在），我相信 @ 987654321@ 当color 属性被允许传递给Button 时，根据需要设置color。

import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const StyledButton = styled(Button)(({ theme, color }) => ({
  minWidth: 0,
  margin: theme.spacing(0.5),
  backgroundColor: color ? theme.palette[color].light : undefined
}));

export default StyledButton;

Answer 2

用 StyledButton 代替 Button 标签

  import { Button } from "@mui/material";
    import { styled } from "@mui/material/styles";
    import React from "react";
    
  const StyledButton = styled(Button)(({ theme }) => ({
  root: {
    minWidth: 0,
    margin: theme.spacing(0.5),
  },
  secondary: {
    backgroundColor: theme.palette.secondary.light,
    "& .MuiButton-label": {
      color: theme.palette.secondary.main,
    },
  },
  primary: {
    backgroundColor: theme.palette.primary.light,
    "& .MuiButton-label": {
      color: theme.palette.primary.main,
    },
  },
}));
    
    export default function ActionButton(props) {
      const { color, children, onClick } = props;
    
      return (
        <StyledButton 
          onClick={onClick}
        >
          {children}
        </StyledButton>
      );
    }