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

Question

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

芯片

在此Chip，有标签属性，您可以选择在芯片中显示文本字段。就像下面这样。

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

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

V5

方法 1：使用sxprop 来设置嵌套组件的样式。请参阅此处的全局 CSS 类名称列表。

<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.labelprop 提供类名来实现：

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

的label属性Chip是 a ReactNode，因此您还可以向 提供自定义标签组件Chip：

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