動的モジュールライブラリクラス名を使用する方法反応するクラスのクラススタイルを追加

概要

　　あなたが動的なCSSを追加する場合、従来の方法で反応し、今日より複雑で、ちょうどライブラリモジュールに学ぶことは簡単にこの問題を解決することができます。右、それは「クラス名」です。

クラス名モジュールライブラリー

NPMインストール

クラス名--saveをインストールNPM

React.jsと使い方

　　クラス名関数がクラス・パラメータの任意の数をとり、これらのパラメータを動的に増減する所与真||偽パターンクラスを持つ文字列またはクラスオブジェクト、クラスのパラメータであってもよいです。次のショーは、シンプルな動的なスタイルのクラスは、クラス名の基本的な使い方を説明するために、クラスをクリックします。状態の高速なレンダリングとイベントをクリックしますsetSatte時に撮影したこの場合、より良い表示するために、フックに反応！クリックして状態フォント演色サイクルの方法を達成。

App.jsコード

インポートが反応、{useState} 'が反応'から
インポート」./App.less' 
からインポートクラス名を'クラス名' 

CONSTアプリ=（）=> { 
    CONST [clickStatus、setClickStatus] = useState（偽）。

    constのboxClick =（）=> { 
        setClickStatus（clickStatus！）。
    }。

    リターン（
        <divのクラス名= '箱'> 
            <divの
                クラス名= {クラス名（{ 
                    '箱-コンテンツ'：trueの場合、
                    'ボックス・コンテンツ-色'：clickStatus、
                }）} 
                のonClick = {boxClick} 
            > 
                こんにちは、ジャック！
            < / DIV>

デフォルトのアプリケーションをエクスポートします。

App.lessコード

/ * {アプリアセンブリ少ないスタイル*} / 
■は{ 
  幅：100vw; 
  高さ：30vh; 
  .unity（）; 
  フレックス方向：カラム; 
} 

/ *以下のパターン{*} /通過
.unity { 
  表示：フレックス。
  コンテンツ正当化：センター; 
  ALIGN =は、アイテムを左：センター; 
} 

/ *のContent静的パターン* / 
■はコンテンツ{ 
  背景：＃33a579; 
  マージントップ：20ピクセル; 
  カラー：ブラック; 
  フォントサイズ：3vmin; 
  フォントウェイト：700; 
  ボーダーRADIUS：1vmin; 
  カーソル：デフォルト; 
} 

/ *のContent動的パターン* / 
■はコンテンツカラー{ 
  色：ゴールド; 
}

テスト結果

概要

　　非常に実用的なクラス名モジュールライブラリ内の実際のプロジェクトを共有することは、スタイルのダイナミックな変化を実装するために簡単かつ迅速にすることができます。