使用styled-components设置MUI Badge子类样式不生效，求解决方案

问题根源 #

你的代码里存在两个语法错误，导致样式无法生效：

• 类名大小写不匹配：你写的是.muibadge-badge，但实际HTML中的类是.MuiBadge-badge（首字母M、B均为大写）
• 选择器末尾多了一个多余的冒号:，这会直接导致CSS语法解析失败

修正后的Styled代码 #

把代码改成以下形式即可生效：

const BadgeStyled = styled(Badge)`
  & > .MuiBadge-badge {
    background-color: #d3d4d7;
    width: 15px;
    height: 15px;
  }
`;

其他可选方案 #

如果觉得styled写法繁琐，也可以直接使用Badge组件的sx属性来修改样式，更简洁直观：

<Badge
  badgeContent={4}
  sx={{
    '& .MuiBadge-badge': {
      bgcolor: '#d3d4d7',
      width: 15,
      height: 15,
    }
  }}
>
  {/* 你的内容，比如Avatar */}
</Badge>

要是需要全局统一修改Badge样式，可以在MUI主题配置中进行覆盖：

const theme = createTheme({
  components: {
    MuiBadge: {
      styleOverrides: {
        badge: {
          backgroundColor: '#d3d4d7',
          width: 15,
          height: 15,
        }
      }
    }
  }
});

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