リアクションコンポーネントにスタイルを追加する方法

反応コンポーネントにスタイルを追加する方法: 1. 式を通じてスタイル オブジェクトを渡すことによって; 2. インライン スタイルを使用することによって; 3. サードパーティのパッケージを通じてクラス名を定義する; 4. スタイル コンポーネントを通じて" styled-コンポーネント」を使用してスタイルを追加します。

#このチュートリアルの動作環境: Windows7 システム、React16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

React コンポーネントにスタイルを追加する 4 つの方法:

コンポーネント内の DOM スタイル

最初: インライン スタイル

考えてみようインライン スタイルを仮想 dom に追加するには、式を使用してスタイル オブジェクトを渡す必要があります:

// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
 <p style={{color:&#39;red&#39;, fontSize:&#39;14px&#39;}}>Hello world</p>

インライン スタイルはスタイル オブジェクトを記述する必要があり、このスタイル オブジェクトの位置はさまざまな場所に配置できます。 render In 関数、コンポーネント プロトタイプ、外部リンク js ファイルなど

#2 番目のタイプ: className (外部参照)

React は、各コンポーネントがは独立した全体です

実際、ほとんどの場合、依然として多くのクラス名を要素に追加しますが、クラスは className として記述する必要があることに注意してください (結局のところ、js を記述しているためです)のようなコードであり、js ルールの制限が適用され、class はキーワードです)

<p className="hello" style = {this.style}>Hello world</p>

3 番目のタイプ: classname/classnames サードパーティ パッケージ定義クラス名

必要な場合があります。さまざまな条件に応じてさまざまなスタイルを追加します。たとえば、完了ステータス、完了は緑、未完了は赤です。この場合、classname/classnames パッケージを使用することをお勧めします。

<p
    className = { 
        classname({
            size: true,
            bg: true
        })
    }
> 第三包classname定义 </p>

4 番目: Styled-components

styled-components は、簡単に言えば、React -in-js フレームワーク用に書かれた CSS のセットです。 , jsでcssを書いています。 npm link

styled-components はサードパーティ パッケージです。インストールする必要があります

const Container = styled.div`
    width: 100px;
    height: 100px;
    background: pink;
    color: white;
`

以上がリアクションコンポーネントにスタイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。