material-ui how to override nested styles - reactjs

Question

I have a simple Material-UI component
<Chip
avatar={
<Avatar>
<TruckIcon color='primary' />
</Avatar>
}
label={name}
color='primary'
/>
the following styles applied from mui-theme:
.MuiChip-root .MuiChip-avatarColorPrimary {
color: #fff;
background-color: #21349f;
}
The question is how to override it?
I have tried many options in my theme override styles:
MuiChip: {
avatarColorPrimary : {
background-color: red;
}
MuiChip: {
root: {
avatarColorPrimary : {
background-color: red;
}
}
}
MuiChip: {
'& .avatarColorPrimary': {
background-color: red;
}
but none of them is working.
I'm using 4.9.5 version of Material-UI.

Answer 1

The most useful resource when trying to determine the appropriate way to override a style is to look at how the default styles are defined in the source code.
Below is an excerpt of the default styles from the Chip source code:
{
root: {
'& $avatarColorPrimary': {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.dark,
}
}
}
Below is an example of overriding the background color in the theme:
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>
);
}