react.js - react className使用引入样式问题
本文介绍了react.js - react className使用引入样式问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在使用 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;
}
}
解决方案
object的属性[[get]]有两种方式,第一种 .操作符,第二种[]。
.操作符后面的属性名不能有 - , []则可以。
所以改成<button className={styles['form__submit--active']}>登录</button>
这篇关于react.js - react className使用引入样式问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文