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

How to override the label styles in MUI's Chip

我正在使用 React 和 MUI 的库。我使用的 MUI 组件是

Chip

并且在这个 Chip 中,有一个标签属性,您可以在其中选择在芯片中显示一个文本字段。如下所示。

我一直在尝试使用假定的 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" />

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

V5

方法 1:使用 sx 属性来设置嵌套组件的样式。查看全局列表 CSS class 名称 here.

<Chip
  label="Chip Filled"
  variant="outlined"
  sx={{
    "& .MuiChip-label": {
      color: "red"
    }
  }}
/>

方法 2: 传递样式标签:

<Chip
  label={<Box sx={{ color: "blue" }}>Chip Filled</Box>}
  variant="outlined"
/>

V4

您需要在 Chip 内定位标签组件,您可以通过向 classes.label 属性提供 class 名称来实现:

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

Chiplabel 属性是一个 ReactNode 所以你也可以为 Chip 提供自定义标签组件:

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