logo

TechCodeview

React のインライン スタイル

導入

シングルページ アプリをほとんど必要としないフロントエンド プロジェクトでは、DOM 要素のインライン スタイルがターゲット要素の >' 属性。

しかし、React では、インラインのスタイル設定に関してはまったく異なります。このガイドでは、ユーザー プロファイル カード コンポーネントを作成する実際の例を使用してこれを実現することに焦点を当てています。

React でのコンポーネントのスタイル設定

classname 属性と外部スタイルシートを組み合わせて React コンポーネントをスタイル設定する通常の方法はすでにご存じかもしれません。

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx 

 paragraph-text{ font-weight: bold; color: beige; }

CSS

インラインスタイル

インライン スタイルで同じ結果を得ても、動作はまったく異なります。 React でインライン スタイルを使用するには、camel プロパティを持つ JavaScript オブジェクトを受け入れる style 属性を使用します。例：

 function MyComponent(){ return Inline Styled Component }

React はパディング値に単位を持たないことに注意してください。 'ピクセル ' は、いくつかの数値インライン スタイル プロパティの接尾辞です。 「em」や「rem」などの他の単位を使用する必要がある場合は、文字列として値を持つ単位を明示的に指定します。これをパディング プロパティに適用すると、パディングになります。 「1.5em」 。

また、これらのスタイルにはベンダー プレフィックスが自動的に付けられないため、ベンダー プレフィックスを手動で追加する必要があります。

可読性の向上

スタイルが多すぎてすべてが不格好になると、MyComponent の可読性は大幅に低下します。以下に示すように、スタイルは単なるオブジェクトであるため、コンポーネントから削除できます。

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

カードコンポーネントの構築

ユーザーカードコンポーネントを構築しましょう。

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

経験則

React の公式ドキュメントでは、プロジェクトをスタイル設定する主な手段としてインライン スタイルを使用することを主張し、代わりに className 属性を使用することを推奨しています。

注 ドキュメント内の一部の例では便宜上スタイルを使用していますが、要素をスタイル設定する主な手段として style 属性を使用することは一般的に推奨されません。

ほとんどの場合、 クラス名 s は、外部 CSS スタイルシートで定義されたクラスを参照する必要があります。スタイルは、レンダリング時に動的に計算されたスタイルを追加するために React アプリでよく使用されます。