如何更改 MUI 样式组件的颜色？

Question

我有一个呈现绿色圆形徽章的 MUI 样式组件。

const StyledGreenBadge = styled(Badge)(({ theme }) => ({
    '& .MuiBadge-badge': {
      backgroundColor: '#44b700',
      color: '#44b700',
      width: '15px',
      height: '15px',
      borderRadius: '100%',
      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
      '&::after': {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        borderRadius: '50%',
        animation: 'ripple 1.2s infinite ease-in-out',
        border: '1px solid currentColor',
        content: '""',
      },
    },
    '@keyframes ripple': {
      '0%': {
        transform: 'scale(.8)',
        opacity: 1,
      },
      '100%': {
        transform: 'scale(2.4)',
        opacity: 0,
      },
    },
  }));

现在，我希望我的代码是 DRY，所以我想创建一个 StyledYellowBadge。

我所要做的就是以某种方式更改 StyledGreenBadge 的 color 属性。

然而，我想了 3 个小时都想不通。

我试过这样的事情：

color: { desiredColor === 'yellow' ? 'yellow' : #44b700'},

其中 desiredColor 是第二个参数，在

之后

{ theme }

我怎样才能做到这一点？

Answer 1

您可以通过描述类型向样式化的 MUI 组件添加自定义属性：

const StyledGreenBadge = styled(Badge)<{ badgeColor?: string }>(

然后，您可以将描述的属性（在本例中为 badgeColor）传递给您的样式 Badge 组件：

 <StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">

并将其分配给您想要的属性：

  backgroundColor: props.badgeColor ?? "#44b700",

完整代码：


const StyledGreenBadge = styled(Badge)<{ badgeColor: string }>(
  ({ theme, ...props }) => {
    console.log(props);
    return {
      "& .MuiBadge-badge": {
        backgroundColor: props.badgeColor ?? "#44b700",
        color: "#44b700",
        width: "15px",
        height: "15px",
        borderRadius: "100%",
        boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
        "&::after": {
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          borderRadius: "50%",
          animation: "ripple 1.2s infinite ease-in-out",
          border: "1px solid currentColor",
          content: '""'
        }
      },
      "@keyframes ripple": {
        "0%": {
          transform: "scale(.8)",
          opacity: 1
        },
        "100%": {
          transform: "scale(2.4)",
          opacity: 0
        }
      }
    };
  }
);

export default function SimpleBadge() {
  return (
    <StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
      <MailIcon color="action" />
    </StyledGreenBadge>
  );
}

Demo

如何更改 MUI 样式组件的颜色？

How can I change the color of MUI styled component?

javascript

css

reactjs

material-ui

styled-components