react中 使用私有样式 类似vue scoped

本文主要是介绍react中 使用私有样式 类似vue scoped，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

新建index.module.scss

	
.lodd {
/*
如果不加 :global ，所有类名就必须添加 styles.title 才可以
*/.sb{color: red;}/*此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名使用的时候 就只需要className="bs" 就可以了
*/:global {.bs{color: #30c92b;}}}

使用私有class样式

 import styles from './index.module.scss'const 组件 = () => {return ({/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}<div className={styles.lodd }>{/* （2） 所有子节点，都使用普通的 CSS 类名*/}<h1 className="bs"><span>登录</span>  </h1>// css中没有加global  就需要写styles.sb 类名才可以<form className={styles.sb}></form></div>)}

如果是用这方式，使用CSS3的动画会没有效果keyframes

应该在动画外部添加 & :local{
animation: slideInRightToLeft 1s ease-in-out;
}就有效果了

.sectForm{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 400px;height: 300px;background: #fff;margin-left: 60%;margin-top: 10%;padding: 2.34375vw 2.08333vw;border-radius: 0.26042vw;display: flex;flex-direction: column;align-items: center;justify-content: center;// & :local{animation: slideInRightToLeft 1s ease-in-out;}}

这篇关于react中 使用私有样式 类似vue scoped的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---