CODEWITHSUNDEEP
reactjsmaterial-ui
Nikita Polevoy
Nikita Polevoy

Reputation: 369

How to override Drawer in Material UI

In my component I need to override css parameter "overflow-y". This parameter is described in class .MuiDrawer-paper. Usually to override css is piece of cake via makeStyles. But in this component has two divs. Parent container and daughter div. And when I set overrided class like:

 const useStyles = makeStyles((theme) => ({
      paper: {
        overflowY: 'unset',
      },
    )};

...

className={classes.paper}

Parent div gets this class and it does not have any sense. Because I need to override daughter class. I tried to do some thing like this:

 className={{ paper: classes.paper }}

But in this case class wan't picked... What should I do?

enter image description here

Upvotes: 1

Views: 4960

Answers (3)

Paul
Paul

Reputation: 1403

The top-voted answer in this thread contains legacy code (makeStyles). I was able to override CSS on a child element of a MUI component via the styled API (migration guide):

const StyledMUIComponent = styled(MUIComponentName)({
  "& .child-class-to-target": {
    overflowY: 'unset'
  }
})

Upvotes: 0

gdh
gdh

Reputation: 13682

The correct way to override material ui classes is to make use of classes prop on Drawer component instead of className.

Read more about overriding classes

const useStyles = makeStyles((theme) => ({
      paper: {
        overflowY: 'unset',
      },
    )};
...
     <Drawer
        classes={{
          paper: classes.paper,
        }}
        anchor="left"
        open={open}        
     />

Upvotes: 6

kyun
kyun

Reputation: 10254

I have 2 options.

  1. using !important
const useStyles = makeStyles((theme) => ({
  paper: {
    overflowY: 'unset !important',
  },
)};
  1. using styles property.
<Drawer style={{overflowY: 'unset'}} />

I prefer to use styles property.

Upvotes: -1

Related Questions