CODEWITHSUNDEEP
cssreactjsmaterial-ui
Golan Kiviti
Golan Kiviti

Reputation: 4245

className on Drawer component doesnt work

I'm using react and material-ui and I have come across an issue, I want to define some css behavior for the drawer component, and I have read that it is quite simple, that all I have to do is use the className property, but for some reason it doesn't work.

Here is my css:

.drawer {
    width: 200px
}

.drawer:hover {
    background-color: black
}

Here is my usage of the drawer:

<Drawer open={this.state.isLeftNavOpen}
                             docked={false}
                             className='drawer'
                             onRequestChange={this.changeNavState}>
                        <MenuItem primaryText='Men'
                                  onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: MEN}})}/>
                        <MenuItem primaryText='Women'
                                  onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: WOMEN}})}/>
                        <MenuItem primaryText='Kids'
                                  onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: KIDS}})}/>
                    </Drawer>

I tried wrapping the Drawer with div but still no success.

Any idea what I'm doing wrong?

Upvotes: 1

Views: 4086

Answers (1)

Nick Bartlett
Nick Bartlett

Reputation: 4975

The library does seem to be adding the className, but this issue you are seeing seems to be a consequence of material-ui setting styles directly on the element, which take priority over those on the class you've added. There are a couple of options until the library makes some changes/fixes, such as:

1) set the width and styles inline with the style and/or width properties: (fiddle)

<Drawer open={this.state.isLeftNavOpen}
    docked={false}
    width={200}
    style={{'background-color': 'black'}}
    className='drawer'>

Unfortunately this approach doesn't allow for :hover styling though, and their current inline styling solution is likely to be changed in the near future (see issue 1951 and those that follow it). That means that your only real solution at the moment to this specific problem is to:

2) mark the styles in the css as !important to override those set on the element by the library: (fiddle)

.drawer {
    width: 200px !important;
}

.drawer:hover {
    background-color: black !important;
}

You can also use a combination of the two, passing the width as a prop and only having the hover background style be !important.

(Using LeftNav (the older version of Drawer) in the fiddles because it's in the easiest-to-consume package I could find at time of writing for material-ui, found it on this comment).

Upvotes: 4

Related Questions