如何覆盖 MUI 芯片中的标签样式

Question

我正在将 React 与 MUI 的库一起使用。 我使用的 MUI 组件是

芯片

在这个Chip ，有 label 属性，您可以选择在芯片中显示文本字段。 像下面。

我一直在尝试使用假定的 MUI 全局样式来覆盖Chip内“头像”文本的样式，例如：

label: {
  '& .MuiChip-label': {
    fontWeight: 'bold',
    color: 'orange'
  }
},



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

但这并不能解决问题。 有没有其他方法可以做到这一点？

Answer 1

您需要在Chip定位标签组件，您可以通过为classes.label道具提供一个类名来实现：

<Chip
  classes={{
    label: classes.label
  }}

Chip的label ReactNode是一个ReactNode所以你也可以为Chip提供一个自定义的标签组件：

<Chip
  label={<div className={classes.label}>Deletable</div>}