Material-UI的Badge徽章怎么自定义颜色？

天琪提问于 2026-03-16 18:38:21 阅读 69

组件

我用Material-UI的Badge组件时，想改徽章的背景色，但官方文档里只看到primary、secondary这些预设值。试了color="error"可以变红，但我想用自定义的颜色比如#ff6b6b，直接写进去没效果，该怎么搞？

我查了下源码，好像得用sx或者styled API，但试了下面这样也不行：

<Badge badgeContent={4} sx={{ '& .MuiBadge-badge': { backgroundColor: '#ff6b6b' } }}>
  <MailIcon />
</Badge>

我来解答赞 10 收藏

反馈

1 条解答

ლ艳艳 Lv1

这个问题我之前也踩过坑，Badge 组件的自定义颜色确实有点坑。

问题原因：Badge 组件的 badge 元素是通过 Portal 渲染到 body 下面的，不在同一个 DOM 层级，所以普通的子选择器有时候不生效。

解决方案有几种：

第一种是用 slotProps，这是 MUI v5 推荐的方式：

import Badge from '@mui/material/Badge';

import MailIcon from '@mui/icons-material/Mail';



<Badge 

  badgeContent={4} 

  slotProps={{ 

    badge: { 

      style: { 

        backgroundColor: '#ff6b6b',

        color: '#fff'  // 如果需要可以加上文字颜色

      } 

    } 

  }}

>

  <MailIcon />

</Badge>

第二种是用 styled 封装一下：

import { styled } from '@mui/material/styles';

import Badge from '@mui/material/Badge';

import MailIcon from '@mui/icons-material/Mail';



const CustomBadge = styled(Badge)({

  '& .MuiBadge-badge': {

    backgroundColor: '#ff6b6b',

    color: '#fff'

  }

});



// 然后直接用

<CustomBadge badgeContent={4}>

  <MailIcon />

</CustomBadge>

第三种如果你想更灵活，可以直接用 badgeContent 传一个自定义元素：

<Badge 

  badgeContent={<span style={{ backgroundColor: '#ff6b6b', padding: '2px 6px', borderRadius: '10px', color: '#fff' }}>4</span>}

>

  <MailIcon />

</Badge>

我个人推荐第一种，slotProps 是官方推荐的方式，写法最简洁。你试下第一种，应该能解决。如果还不行，检查下是不是有其他样式覆盖了你的设置，可以用浏览器开发者工具看下 badge 元素的 computed 样式。

2026-03-16 22:03