Currently, I am exploring how to personalize MUI 5 components by leveraging theming and props more and minimizing the use of CSS overrides (which can negate the benefits of MUI).
To start off, I have created my own theme:
export const theme = createTheme({
palette: {
mode: "light",
primary: {
main: "#12131c",
contrastText: "#fcfcfc",
},
},
});
However, this custom theme only affects the <AppBar> component and not the <Drawer> component, which remains white.
https://i.stack.imgur.com/ZpEd0.png
Adding an sx override to the <Drawer> component did not produce any changes:
<Drawer
sx={{ bgcolor: "primary.main", color: "primary.contrastText" }}
>
<nav>
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon>
<InfoIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItemButton>
</ListItem>
...
Another suggestion from a Stack Overflow answer was to add:
<Drawer
PaperProps={{
sx: {
bgcolor: "primary.main",
color: "primary.contrastText",
},
}}
>
Although this solution works better, it does not apply to the <ListItemIcon>, and the color change on hover for List Items is lost.
https://i.stack.imgur.com/fsLvH.png
I could manually add sx overrides to all relevant components to achieve the desired style, but I believe this goes against the intended purpose. Is there a more effective way to utilize and benefit from the MUI system? Thank you