My goal is to style all the <Chip> elements within a <Grid> that has the class .table-header, but they are not changing their style (I have a <p> that should be colored in red and it works). Why does the styling work for the <p> element but not for the <Chip>? I want to achieve this without adding the same class to each individual <Chip>.
I am using MUI v5.11.4.
Here is a portion of the tsx code:
<Grid className={classes['table-header']}>
<Grid item xs={1} />
<Grid item xs={2}>
<Chip avatar={<Avatar>1</Avatar>} label="Element1" />
<p>Red text</p>
</Grid>
<Grid item xs={4}>
<Chip avatar={<Avatar>2</Avatar>} label="Element2" />
</Grid>
<Grid item xs={5} />
</Grid>
And here is the module.css code:
.table-header Chip {
width: 100%;
}
.table-header p {
color: red;
}