如何解决arrays.push和array.join''与CSS模块有何不同?
我正在关注的教程是使用此方法动态更改按钮的颜色:
let buttonColor = [classes.Button]
if (this.state.bool) {
buttonColor.push(classes.Red)
}
return (
<button
onClick={this.boolToggler}
alt={this.state.bool}
className={buttonColor.join(' ')}>Toggle List
</button>
)
这是css文件:
.Button {
background-color: green;
color: white;
font: inherit;
padding: 10.5px 14px;
cursor: pointer;
}
.Button:hover {
background-color: lightgreen;
color: black;
}
.Button.Red {
background-color: red;
}
.Button.Red:hover {
background-color: salmon;
}
buttonColor.join(' ')
不会只留下classes.Button classes.Red
吗?怎么知道使用classes.Button.Red?
解决方法
我不确定classes
是什么对象,但是从CSS推断出您想简单地将.Button
和.Red
的类名添加到button
,试试这个:
let buttonColor = [".Button"]
if (this.state.bool) {
buttonColor.push(".Red")
}
return (
<button
onClick={this.boolToggler}
alt={this.state.bool}
className={buttonColor.join(' ')}>Toggle List
</button>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。