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

, но ни один из них не работает. Я использую 4.9.5 версию Material-UI.

Answer 1

Самый полезный ресурс при попытке определить подходящий способ переопределения стиля - посмотреть, как стили по умолчанию определены в исходном коде.

Ниже приведен отрывок стилей по умолчанию из Исходный код чипа :

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

Answer 2

 <Chip
  avatar={
    <Avatar>
      <TruckIcon color='primary' />
    </Avatar>
  }
  label={name}
  color='primary'
  classes = {{
   root:"root-css",
   avatarColorPrimary:"avtar-css"
   }}
/>

в вашем css файле

 .root-css {
       // css for root
     }
    .avtar-css {
     // css for avtar
    }

вы можете проверить https://material-ui.com/api/chip/#css для справки. классы и css реквизит