react className使用引入样式问题

Question

在使用 react 引入外部样式(sass, css, less)时, 有这这样一个疑问: 我的css命名是如此命名的(.form__submit--active), 那我在 js 中的className该如何书写? 申明一下: 我下面的 js 书写是错误的。

源码:

js:

import styles from './style.scss'
render () {
    return (
        <div>        
            <form className={styles.form}>
                {/* 注: 下面的className书写都是错误的 */}
                <input type="text" className={styles.form__username }/>
                <input type="password" className={styles.form__password}/>
                <input type="text" className={styles.form.code}/>
                <button className={styles.form__submit--active}>登录</button>
            </form>
        </div>
    )
}

scss:

.form {width: 100%;}
.form__username {height: 40px; width: 200px;}
.form__password {height: 40px;}
.form__submit--active {background-color: green;}
.form {
    .code {
        height: 40px;
        width: 80px;
    }
}

Answer 1

object的属性[[get]]有两种方式，第一种 .操作符，第二种[]。
.操作符后面的属性名不能有 - , []则可以。
所以改成<button className={styles['form__submit--active']}>登录</button>

Answer 2

如果有 嵌套css 属性的情况下怎么办呢?

.button.active {
    color: blue;
}