Material UI use primary and secondary in makeStyles

user_13815542 0
Viewed 561

I am setting the background color of a Drawer component using useStyle. if i set background: 'red' it works fine. But setting it to background: 'primary' doesnt work. What might i be doing wrong? Here is my code:

const useStyles = makeStyles((theme) => ({
  
  drawer: {
    flexGrow: 1,
    flexShrink: 0,
  },
  drawerPaper: {
    flexGrow: 1,
    background: 'primary',
  },
}));

<Drawer
        className={classes.drawer}
        variant='persistent'
        anchor='top'
        open={true}
        classes={{
          paper: classes.drawerPaper,
        }}
      >
material-ui
1 Answers

const useStyles = makeStyles(({ palette }) => ({
    drawerPaper: {
      flexGrow: 1,
      background: palette.primary.main,
    },
}));

makeStyles function contain the option param which has a palette, theme colors in it. so you can use palette.primary.main or others.

more see(mui v4 version): https://v4.mui.com/zh/system/palette/#palette

user_4872630
Related