在react中写scss样式避免css样式污染

[(32条消息) 怎么在react中写scss样式_yezi153的博客-CSDN博客](https://blog.csdn.net/yezi153/article/details/121696647)

[react中sass的使用，解决样式污染，样式穿透 - 掘金](https://juejin.cn/post/7031556713329197093)

写样式 

最外层写.root类名

里面有:global包裹 

再写具体的类型 写具体的样式 

.root {
  height: 100%;
 
  :global {
    .content {
      position: relative;
      z-index: 1;
      height: 100%;
    }
}

　　

使用样式 

先引入样式文件import styles from './index.module.scss'

最外层的div里面写className="styles.root"

 后面的类名写具体的类名就行

例子：

 

 

css modules-最佳实践

• 每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名： root ）
• 其他所有的子节点，都使用普通的 CSS 类名 :global

index.module.scss

// 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>
  )
}
​

作者：风妮
链接：https://juejin.cn/post/7031556713329197093
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。