4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明

1. インラインスタイル

仮想DOMにインラインスタイルを追加するには、式を使用してスタイルオブジェクトを渡す必要があります。インラインスタイルを実装するには、スタイルオブジェクトを記述する必要があります。このスタイルオブジェクトは、 render関数内、コンポーネントプロトタイプ上、外部jsファイル内など、さまざまな場所に配置できます。
注: ここには 2 つの括弧があります。最初の括弧は JSX に JS を挿入していることを示し、2 番目の括弧はオブジェクトの括弧です。

<p style={{color:'red', fontSize:'14px'}}>こんにちは世界</p>

2. クラスを使用する

React では各コンポーネントを独立したエンティティと見なすため、インラインスタイルを使用することを推奨しています。

実際、ほとんどの場合、要素に多くのクラス名を追加しますが、 class classNameとして記述する必要があることに注意してください（結局のところ、jsのようなコードを記述し、jsルールを受け取るため、 classはキーワードです）

React をインポートします。{ コンポーネント } を 'react' からインポートします。
1. 外部で定義されたスタイルをインポートする './style.css' からスタイルをインポートする

クラスClassStyleはComponentを拡張します{
  与える（） {
    // js ロジック let className = cx({
      フォント: false
    })
    戻る （
      <>
        <div className={className}>こんにちは</div>
        <p className='setstyle'>スタイル</p>
        <Divコンテナ>
          世界
        </DivContainer>
      <>
    ）
  }
}

デフォルトのClassStyleをエクスポートする

3. 異なるclassNames条件に異なるスタイルを追加する

場合によっては、完了ステータス (完了は緑、未完了は赤など) に応じて異なるスタイルを追加する必要があります。この場合、classnames パッケージを使用することをお勧めします。
目的：
React Nativeは複数のclassNameを動的に追加するため、エラーが報告されます。

'./style.css' からスタイルをインポートします
<div className={style.class1 style.class2}</div>

最終的なレンダリング効果は次のとおりです。

<div クラス = 'クラス1 クラス2'></div>

ダウンロードしてインストールする

npm i -S クラス名

使用

'classnames' からクラス名をインポートします
<div className=クラス名({
    'class1': 真、
    'クラス2': 真
    )>
</div>

4. CSS-in-JS

styled-components React 用に書かれた CSS-in-JS フレームワークです。簡単に言えば、CSS を JS で記述することを意味します。 npmリンク

従来のフロントエンドソリューションでは、「関心の分離」の原則が推奨されています。HTML、CSS、JavaScript はそれぞれの機能を実行し、分離する必要があります。
React プロジェクトでは、コンポーネントベースのソリューションがより推奨されており、HTML、CSS、JavaScript を集中的に記述および管理する方法が自然に形成されます。

styled-components は、おそらく CSS-in-JS の最も人気のあるライブラリです。styled-components を使用すると、ES6 のタグテンプレート文字列構文を使用して、スタイル設定が必要なコンポーネントの一連の CSS プロパティを定義できます。コンポーネントの JS コードが解析され実行されると、styled-components は CSS セレクターを動的に生成し、対応する CSS スタイルをスタイルタグの形式でヘッドタグに挿入します。動的に生成された CSS セレクターには、スタイルの競合を避けるためにグローバルな一意性を保証する小さなハッシュ値が設定されます。

1. インストール

npm i -S スタイル付きコンポーネント

スタイルの定義
2. スタイルjsファイル

'styled-components' から styled をインポートします
const タイトル = styled.div`
    色：赤;
    フォントサイズ:16px;
    h3{
        色:青;
        フォントサイズ:20px;
    }
`
輸出 {
    タイトル
}

通常のReactコンポーネントと同じようにタイトルを使用して表示します。

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Styles' から { Title } をインポートします
クラスAppはComponentを拡張します{
与える（） {
    戻る （
        <div>
            <タイトル>
            私はただのタイトルです <h3>Hello World</h3>
            </タイトル>
        </div>
        );
    }
}
デフォルトアプリをエクスポート

3. スタイル継承スタイル

'styled-components' から styled をインポートします
const ボタン = styled.button`
    フォントサイズ: 20px;
    境界線: 1px 実線の赤;
    境界線の半径: 3px;
`;

// Button を継承し、いくつかのスタイルをオーバーライドする新しいコンポーネント const Button2 = styled(Button)`
    色: 青;
    境界線の色: 黄色;
`;

輸出 {
    ボタン、
    ボタン2
}

見せる

React をインポートします。{ コンポーネント } を 'react' からインポートします。
輸入 {
ボタン、
ボタン2
} './Styles' から
クラスAppはComponentを拡張します{
与える（） {
    戻る （
    <div>
        <Button>私はボタン1です</Button>
        <Button2>私はボタン2です</Button2>
    </div>
    );
}
}
デフォルトアプリをエクスポート

4. 属性転送スタイル

'styled-components' から styled をインポートします
const 入力 = styled.input`
    色: ${props => props.inputColor || "青"};
    境界線の半径: 3px;
`;
輸出 {
    入力
}

見せる

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Styles' から { Input } をインポートします
クラスAppはComponentを拡張します{
与える（） {
    戻る （
    <div>
        <Input defaultValue="Hello" inputColor="red"></Input>
    </div>
    );
}
}
デフォルトアプリをエクスポート

4つのReactコンポーネントでDOMスタイルを設定する方法についての記事はこれで終わりです。ReactコンポーネントのDOMスタイルに関する関連コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: