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

Question

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

这是我的 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

库似乎确实添加了 className，但您看到的这个问题似乎是 material-ui 直接在元素上设置样式的结果，它优先于那些您添加的 class。在库做出一些 changes/fixes 之前，有几个选项，例如：

1) 设置宽度和样式与 style and/or 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;
}

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

（在小提琴中使用 LeftNav（抽屉的旧版本）因为它是我在撰写 material-ui 时能找到的最容易使用的包，在 this comment 上找到它).

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

className on Drawer component doesnt work

css

reactjs

material-ui