Reactjs 材质ui如何替代嵌套样式

我有一个简单的材质UI组件

    <Chip
      avatar={
        <Avatar>
          <TruckIcon color='primary' />
        </Avatar>
      }
      label={name}
      color='primary'
    />

问题是如何覆盖它

我在主题覆盖样式中尝试了许多选项：

MuiChip: {
 avatarColorPrimary : {
  background-color: red;
}


    MuiChip: {
      root: {
        avatarColorPrimary  : {
           background-color: red;
          }
       }
    }

MuiChip: {
 '& .avatarColorPrimary': {
  background-color: red;
}

但它们都不起作用。

---

我使用的是Material UI的4.9.5版本。

在试图确定覆盖样式的适当方式时，最有用的资源是查看如何在源代码中定义默认样式

以下是从中摘录的默认样式：

下面是覆盖主题中背景色的示例：

import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";
import DoneIcon from "@material-ui/icons/Done";

const theme = createMuiTheme({
  overrides: {
    MuiChip: {
      root: {
        "& $avatarColorPrimary": {
          backgroundColor: "red"
        }
      }
    }
  }
});

export default function Chips() {
  return (
    <ThemeProvider theme={theme}>
      <Chip
        avatar={
          <Avatar>
            <DoneIcon color="primary" />
          </Avatar>
        }
        label="Sample Name"
        color="primary"
      />
    </ThemeProvider>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{createMuiTheme，ThemeProvider}”；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Chip”导入芯片；
从“@material ui/icons/Done”导入DoneIcon；
const theme=createMuiTheme({
覆盖：{
穆伊希普：{
根目录：{
“&$avatarColorPrimary”：{
背景颜色：“红色”
}
}
}
}
});
导出默认功能芯片（）{
返回(
请加一个沙箱
{
   root: {
     '& $avatarColorPrimary': {
        color: theme.palette.primary.contrastText,
        backgroundColor: theme.palette.primary.dark,
      }
   }
}

import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";
import DoneIcon from "@material-ui/icons/Done";

const theme = createMuiTheme({
  overrides: {
    MuiChip: {
      root: {
        "& $avatarColorPrimary": {
          backgroundColor: "red"
        }
      }
    }
  }
});

export default function Chips() {
  return (
    <ThemeProvider theme={theme}>
      <Chip
        avatar={
          <Avatar>
            <DoneIcon color="primary" />
          </Avatar>
        }
        label="Sample Name"
        color="primary"
      />
    </ThemeProvider>
  );
}