ホームページ >ウェブフロントエンド >jsチュートリアル >リアクションコンポーネントにスタイルを追加する方法
#このチュートリアルの動作環境: Windows7 システム、React16 バージョン この方法は、すべてのブランドのコンピューターに適しています。反応コンポーネントにスタイルを追加する方法: 1. 式を通じてスタイル オブジェクトを渡すことによって; 2. インライン スタイルを使用することによって; 3. サードパーティのパッケージを通じてクラス名を定義する; 4. スタイル コンポーネントを通じて" styled-コンポーネント」を使用してスタイルを追加します。
React コンポーネントにスタイルを追加する 4 つの方法:
コンポーネント内の DOM スタイル最初: インライン スタイル考えてみようインライン スタイルを仮想 dom に追加するには、式を使用してスタイル オブジェクトを渡す必要があります:// 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>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 サイトの他の関連記事を参照してください。