关于React动态修改元素样式的三种方式

<div className='scroll-title clear-fix' ref={ this.manage }>

this.manage = React.createRef()

this.manage.current.style.display = 'block'

that.manage.current.style.display = 'block'

 constructor() {
        super()
        this.state = {
            display: true
        }
    }   
    componentDidMount() {
        window.onscroll = function(event) {
                if (divTop < -12) {
                     that.setState({
                         display: false
                     })
                    that.manage.current.style.display = 'block'
                } else {
                     that.setState({
                         display: true
                     })
                }
        }
    }

<div className={this.state.display ? 'none' : 'scroll-title }>

npm i sass -D 

background-image: url(~assets/login.png); 

import styles from './index.module.scss'

<div className={styles.css类名}></div>

import styles from './index.module.css'
<div className={styles.root}>div的内容</div>

/*这样css modules就不会修改掉类名.a了。等价于写在 index.css中 */
:global(.a) {   }
 
/* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */
.aa :golbal(.a) { }

:global(.ant-btn) {
  color: red !important;
}

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