1.下载引入包
npm i scss -D
2.修改样式文件名
从 xx.scss -> xx.module.scss
(React脚手架中的约定,与普通 CSS 作区分)
3.组件中进行使用
import styles from './index.module.scss'
<div className={styles.css类名}></div>
4.最佳用法
- 每个组件的根节点使用 CSSModules 形式的类名( 根元素的类名:
root
) - 其他所有的子节点,都使用普通的 CSS 类名 :global
index.module.scss
.root {
display: 'block';
position: 'absolute';
// 此处,使用 global 包裹其他子节点的类名。此时,这些类名就不会被处理,在 JSX 中使用时,就可以用字符串形式的类名
// 如果不加 :global ,所有类名就必须添加 styles.title 才可以
:global {
.title {
.text {
}
span {
}
}
.login-form { ... }
}
}
组件:
import styles from './index.module.scss'
const 组件 = () => {
return (
{/* (1) 根节点使用 CSSModules 形式的类名( 根元素的类名: `root` )*/}
<div className={styles.root}>
{/* (2) 所有子节点,都使用普通的 CSS 类名*/}
<h1 className="title">
<span className="text">登录</span>
<span>登录</span>
</h1>
<form className="login-form"></form>
</div>
)
}