I recently started using Material-UI and encountered an issue where I couldn't override the root class for Avatar, specifically MuiAvatar-root.
Material-Ui Version: 4.11.3
Despite following examples provided by material-ui's documentation here, I was unable to successfully override the Avatar style.
In the code snippet below
1st
<Grid item>
<Avatar alt="avatar" src={avatar} classes={{root: classes.root }} />
</Grid>
The above approach didn't yield any results along with several other methods attempted.
root: {
width: "128px",
height: "128px",
margin: "8px",
},
Eventually, I managed to override the Avatar style by utilizing the overrides key in my global theme styles as shown below:
const theme = createMuiTheme({
// Not Required
overrides: {
MuiAvatar: {
root: {
width: "128px",
height: "128px",
margin: "8px",
},
}
},
palette: {
...
});
However, this method led to unintended changes in all Avatars across my project. An example is demonstrated below:
2nd
<Container className={classes.center}>
<Avatar className={ classes.avatar }>
<ContactMailIcon />
</Avatar>
</Container>
const useStyles = makeStyles((theme) => ({
...
}));
To resolve the issue, I discovered that adding '&&' before the style properties helped in both scenarios as illustrated below:
For 1st scenario
root: {
'&&': {
width: "128px",
height: "128px",
margin: "8px",
}
},
And for the 2nd scenario:
export const useContactStyles = makeStyles((theme) => ({
...
avatar: {
"&&": {
margin: theme.spacing(1),
backgroundColor: "#ff4838",
alignItems: 'center',
}
},
...
}));
This workaround successfully allowed me to override the default MuiAvatar-root class and apply individual styles. However, I am uncertain about the functioning of '&&' or its relevance to SASS which I have no prior experience with.
EDIT
**Upon further explanation from @Bassem and through this article, it seems that '&&' is used to increase specificity/priority in styling.
Although this trick resolved my issue without causing conflicts, I am curious whether this method is recommended practice or if there are potential drawbacks to using '&&'?