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;
                }
                
            }