서랍 구성 요소의 className이 작동하지 않습니다.

Question

저는 react 및 material-ui를 사용하고 있는데 문제가 생겼습니다. 서랍 구성 요소의 CSS 동작을 정의하고 싶습니다. ClassName 속성을 사용해야하지만 어떤 이유로 작동하지 않습니다. 내가 DIV하지만 여전히 성공하지 서랍을 포장하려

<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> 

:

.drawer { 
    width: 200px 
} 

.drawer:hover { 
    background-color: black 
} 

여기 서랍 내 사용은 다음과 같습니다

여기 내 CSS입니다.

내가 뭘 잘못하고 있는지 아는 사람이 있습니까?

Answer 1

라이브러리에 className이 추가 된 것처럼 보이지만이 문제는 추가 한 클래스의 스타일보다 우선적으로 요소에 스타일을 설정하는 결과로 나타납니다. (fiddle)

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

불행하게도 :

1)는 style 및/또는 widthproperties 인라인 폭과 스타일을 설정 라이브러리는 다음과 같은 몇 가지 변경/수정을하게 될 때까지 몇 가지 옵션이 있습니다 그러나이 방법은 :hover 스타일링을 허용하지 않으며, 현재의 인라인 스타일 솔루션은 가까운 미래에 변경 될 수 있습니다 (issue 1951 및 그 뒤 따르는 스타일 참조).

2) 라이브러리에 의해 요소에 설정을 대체 할 !important으로 CSS에서 스타일을 표시 : 즉,이 특정 문제에 대한 순간에 당신의 유일한 솔루션입니다 것을 의미한다 (fiddle)

.drawer { 
    width: 200px !important; 
} 

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

두 가지를 조합하여 너비를 지주 모양으로 전달하고 호버 배경 스타일 만 사용하면 !important이 될 수 있습니다.

(가장 최근에 사용한 서랍 버전)은 material-ui 글을 쓸 때 가장 쉽게 사용할 수있는 패키지에 있기 때문에 this comment에서 발견되었습니다.