material-ui如何覆盖嵌套样式

Question

我有一个简单的Material-UI组件

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

从mui-theme应用以下样式：

.MuiChip-root .MuiChip-avatarColorPrimary {
    color: #fff;
    background-color: #21349f;
}

问题是如何覆盖它？

我在主题替代样式中尝试了许多选项：

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


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

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

，但是它们都不起作用。 我正在使用Material-UI的4.9.5版本。

Answer 1

尝试确定覆盖样式的适当方法时，最有用的资源是查看源代码中默认样式的定义。

以下是Chip source code中默认样式的摘录：

{
   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>
  );
}