我正在使用 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 包装抽屉,但仍然没有成功。
知道我做错了什么吗?
最佳答案
库似乎确实添加了类名,但您看到的这个问题似乎是 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 上找到它) .
关于css - 抽屉组件上的类名不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37775915/