如何为MUI V5的styled组件传递自定义样式？

• MUI V5 中styledAPI返回的是React组件，不是旧版本makeStyles生成的类名映射对象，你试图通过StyledButton["root"]、StyledButton[color]获取类名的写法完全不适用。
• 样式定义时额外嵌套了root层级，而styled包裹组件时写的样式默认作用于组件根节点，不需要额外加根节点嵌套。
• MUI V5的Button组件已经移除了.MuiButton-label类，按钮内容直接挂载在根节点下，该选择器无效。
• 最终渲染时你使用的还是原生MUI Button组件，没有使用你定义的StyledButton组件，样式自然不会生效。
• 没有将传入的color属性传递给样式逻辑做判断，样式无法根据属性动态切换。

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

// 自定义样式的Button组件，通过customColor属性控制样式
const StyledButton = styled(Button, {
  // 避免自定义属性传递到DOM，防止控制台告警
  shouldForwardProp: (prop) => prop !== "customColor",
})(({ theme, customColor }) => ({
  minWidth: 0,
  margin: theme.spacing(0.5),
  // 根据customColor动态匹配样式
  ...(customColor === "secondary" && {
    backgroundColor: theme.palette.secondary.light,
    color: theme.palette.secondary.main,
  }),
  ...(customColor === "primary" && {
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.primary.main,
  }),
}));

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

  return (
    // 直接使用StyledButton组件，传入自定义属性控制样式
    <StyledButton customColor={color} onClick={onClick}>
      {children}
    </StyledButton>
  );
}

原有调用代码无需修改，即可正常生效。

• 这里将内部属性名改为customColor是为了避免和MUI Button原生的color属性冲突，防止原生内置样式覆盖自定义样式。
• 如果需要兼容更多颜色逻辑，可以直接用对象映射的方式替换...的判断写法，扩展性更强。

内容的提问来源于stack exchange，提问作者Moe