css - 抽屉组件上的类名不起作用

Question

我正在使用 react 和 material-ui，我遇到了一个问题，我想为抽屉组件定义一些 css 行为，我读到它非常简单，我所要做的就是使用className 属性，但由于某些原因它不起作用。

这是我的CSS:

.drawer {
    width: 200px
}

.drawer:hover {
    background-color: black
}

这是我对抽屉的使用:

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

我尝试用 div 包装抽屉，但仍然没有成功。

知道我做错了什么吗？

Answer 1

库似乎确实添加了类名，但您看到的这个问题似乎是 material-ui 直接在元素上设置样式的结果，它优先于类中的样式你已经添加了。在库进行一些更改/修复之前，有几个选项，例如:

1) 设置宽度和样式与 style 和/或 width properties : ( fiddle )

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

不幸的是，这种方法不允许 :hover 样式，并且他们当前的内联样式解决方案可能会在不久的将来更改(请参阅 issue 1951 及其后的内容)。这意味着您目前唯一真正解决此特定问题的方法是:

2) 将 css 中的样式标记为 !important 以覆盖库在元素上设置的样式:( fiddle )

.drawer {
    width: 200px !important;
}

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

您也可以结合使用两者，将宽度作为 Prop 传递，并且只将悬停背景样式设置为 !important。

(在 fiddles 中使用 LeftNav(Drawer 的旧版本)，因为它是我在编写 material-ui 时可以找到的最容易使用的包，在 this comment 上找到它) .