如何覆蓋 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>}