如何覆盖MUI中Chip组件的label样式

问题根因 #

你之前的写法不生效是因为自定义样式类绑定在了Avatar组件上，而你写的样式规则是查找当前元素下的.MuiChip-label子元素，实际上.MuiChip-label是Chip组件的直接子节点，不属于Avatar的子节点，所以选择器匹配不到元素，样式自然不生效。

修改样式绑定的位置，把自定义类从Avatar移到Chip组件即可：

// 原有样式规则不需要修改
label: {
  '& .MuiChip-label': {
    fontWeight: 'bold',
    color: 'orange'
  }
},

// 组件调用修改如下
<Chip
  avatar={<Avatar style={{
    width: '32px', height: '32px', padding: '5px', border: '1px solid', 
    backgroundColor: 'black'
  }}
  src="/avatar/photo/pic.png" />}
  label="Avatar"
  variant="outlined"
  className={classes.label} // 自定义类移到Chip组件上
/>

MUI的Chip组件原生提供labelProps属性，专门用来透传参数给label元素，不需要写嵌套选择器：

<Chip
  avatar={<Avatar style={{
    width: '32px', height: '32px', padding: '5px', border: '1px solid', 
    backgroundColor: 'black'
  }}
  src="/avatar/photo/pic.png" />}
  label="Avatar"
  variant="outlined"
  labelProps={{
    style: {
      fontWeight: 'bold',
      color: 'orange'
    }
  }}
/>

如果要使用自定义类，也可以写成labelProps={{className: '你的自定义类名'}}。

如果要全局修改所有Chip的label样式，可以直接在主题配置中覆盖MUI默认样式：

// 创建主题时添加配置
const theme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        label: {
          fontWeight: 'bold',
          color: 'orange'
        }
      }
    }
  }
})

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