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