react className変数の使用方法

index.module.scss

.select {
  display: flex;
  width: 148px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  .active {
    background-color: #ffffff;
    color: #ac1d1d;
  }
}
.select_item {
  flex: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}

[success]このネーミング仕様は主に回避されるclassの役割ドメインは相互に影響し、新版のReactにはxxx.module.scssが自動的に開きます.
typescriptではこんな感じ

declare module '*.module.scss' {
 export const style: any
}

index.js

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

class Demo extends Component {
   return (
      

        
  
        
  
      
    )
}

すべてclass直接通過styles.xxx一級方式使用styles変数の印刷内容は次のとおりです.

{
  active: "airList_active__G9PFh",
  select: "airList_select__1T2lI",
  select_item: "airList_select_item__1_MHW"
}

最終的にブラウザでの組み合わせの結果:

index.module.scssのスタイルは、1次元jsonオブジェクトに処理され、階層の組み合わせによってclassに追加され、最終的なスタイル効果を実現し、vueのscopedに類似したスタイルは衝突しません.
注記:className複数の値
ようこそ:技術開発共有録