[JavaScript知识库]react中css modules基本使用

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