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

该库似乎确实添加了className，但您看到的这个问题似乎是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;
}

您还可以使用两者的组合，将宽度作为道具传递，并且只将悬停背景样式设为!important。

（在小提琴中使用LeftNav（旧版Drawer），因为它是我在撰写material-ui时可以找到的最易于使用的软件包，在this comment上找到它。

Drawer组件上的className不起作用

1 个答案: