How to add css variable to createMuiTheme

Question

I'm using MuiThemeProvider in my component and I wanted to style the MenuItem from MUI. What I did here is creating a variable with createMuiTheme like this

const themes = createMuiTheme({
   overrides: {
      MuiListItem: {
         root: {
           "&$selected": {
              background: '#459FB6',
              color: '#fff',
            }
         }
      }
   }
});

and I passed this to my ThemeProvider like this

     <MuiThemeProvider theme={themes}>
        <MenuItem>
           Menu Item
        </MenuItem>
     </MuiThemeProvider>

I also have an object with a color palette and I want to use them inside my themes. My question is how to achieve something like this

const themes = createMuiTheme({
   overrides: {
      MuiListItem: {
         root: {
           "&$selected": {
              background: colors.blue, // here i want to use my custom variable
              color: colors.white, // here i want to use my custom variable
            }
         }
      }
    }
});

Thanks in advance!

Milos Milos · Accepted Answer · 2020-07-19T19:33:07

If someone else stuck with the same problem, I created this answer. I achieved this by using makeStyles instead of createMuiTheme and ThemeProvider. The code sample is down below

const useStyle = makeStyles({
  root: {
     "&:hover": {
        backgroundColor: `${theme.colors.highlight}`,
        color: `${theme.colors.white}`,
     }
  },
  selected: {
     "&$selected": {
        backgroundColor: `${theme.colors.textLink}`,
        color: `${theme.colors.white}`,
     },
     "&$selected:hover": {
        backgroundColor: `${theme.colors.highlight}`,
        color: `${theme.colors.white}`,
     },
  },
});

const classes = useStyle();

and then I passed classes to my MenuItem component like this

    <MenuItem classes={{ root: classes.root, selected: classes.selected}}>
       Menu Item
    </MenuItem>

and voila!

How to add css variable to createMuiTheme

1 Answers