CSS で React コンポーネントのスタイルを設定する方法

さまざまな手法を使用して、React アプリとページのスタイルを設定できます。 最も簡単な方法は、React コンポーネント ライブラリをダウンロードすることです。 ただし、ライブラリを使用する場合でも、遅かれ早かれカスタム スタイルを追加する必要があります。 それで、それを行うための最良の方法は何ですか？

小規模なプロジェクトの場合、インライン スタイル、モジュールを使用するか、 className仕様を自分で記述して、アプリのスタイルを快適に設定できます。 また、アプリなどの動的プロジェクトの場合は、小道具を簡単に実装できるライブラリを使用することをお勧めします。

または、ビルド済みのスタイルが付属する Tailwind UI などのユーティリティ キットを使用することもできます。 モックアップやプレゼンテーションをレンダリングする必要がある場合は、React 対応の UI キットが最適です。

classNameによる実用的なスタイリング

React では、 classNameプロパティを通じて実用的な CSS スタイルが適用されます。

これは、プロジェクトでスタイルシートを使用することと同じです。 React はコンポーネント構造によって駆動されるため、特定のニーズにのみスタイルシートをインポートできます。

例を見てみましょう。

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

そして、これは結果になります：

これは完全に有効なバニラ テクニックです。 また、コア コンポーネント間で再利用するグローバル変数を宣言するために最もよく使用されます。

唯一の注意点は、プロジェクトが大きくなるにつれて、名前の競合が発生する可能性も高くなることです。

同様に、何百ものスタイルシートを管理する効率のコストは、とてつもなく高くなります。

インライン スタイルに JSX を使用する

React では、インライン スタイルを使用して DOM 要素のスタイルを設定できます。 CSS ロジックは同じままですが、スタイル自体は JavaScript を通過する必要があります。 これは JSX とも呼ばれます。

例を見てみましょう：

見出し.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

line-heightを記述する代わりに、 lineHeightを使用していることに注意してください。

これについての説明は、 「JSX は HTML よりも JavaScript に近いため、React DOM は HTML 属性名の代わりにcamelCaseのプロパティ命名規則を使用する」というものです。 .

インライン スタイルは通常、例を示すために使用されますが、特定の要素に動的なスタイルを追加するためにも使用されます。 さらに、インライン スタイルは疑似要素やメディア クエリをサポートしません。これは、 styleしか渡せないためです。 スタイルシートを使用することは、より良い代替手段です。

CSS モジュールを使用したローカル スコープの作成

名前の衝突を起こさずにカスタム スタイルをコンポーネントに適用する方法の 1 つは、CSS モジュールを使用することです。

これは、ローカル スコープを各コンポーネントに個別に適用できるアプローチです。

そのようです：

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

また、同じロジックを 2 回書き直す必要がないように、別のスタイルシートから特定のスタイルを呼び出す、コンポジションのようなこともできます。

 .header { composes: header from './style.css'; }

JS の CSS

Vue や Svelte などのフレームワークとは異なり、React は独自のスタイリング インターフェイスを提供しません。

したがって、前述の方法を使用してコンポーネントの CSS を作成することもできますが、究極のアプローチは JS ライブラリで CSS を使用することです。 各ライブラリには長所と短所がありますが、一般的に利点は変わりません。

• さまざまなスタイルのバリエーションのための小道具。
• アクセシブルなテーマ。
• コンポーネントベースのスタイル スコープ。
• JavaScript 関数を使用した動的 CSS 変数。

JS における CSS の最も一般的なソリューションは、Styled Components です。

その他の注目すべき選択肢には、エモーションとリナリアが含まれます。 デモのために、Styled Components ライブラリを使用して CSS を React コンポーネントに統合する方法を見てみましょう。

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

まず、ヘッダー タイトルの<section>コンテナーをレンダリングするHeaderWrapperという新しいコンポーネントを作成します。 次に、 HeaderTitleという別のコンポーネントを作成し、CSS 変数をそれに渡します。 つまり、ある意味では、React のコンテキストでのみ Web コンポーネントを操作するのとまったく同じです。

CSS フレームワークの使用

フロントエンドのすべてがフレームワークやライブラリに移行しているわけではありません。

それよりも、プロジェクトをゼロから始めるのは非効率的であるという事実に関係しています。 Tailwind CSS のようなフレームワークは、すべてのアプリケーション構造をゼロから作成する必要性を軽減するのに役立ちます。 Tailwind CSS の仕組みは、フレームワークが事前に定義されたユーティリティ クラスを提供することで、独立した CSS を記述する必要なくレイアウトを構築できるようにします。

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

そのため、 Constantsを使用してコンポーネント スタイルを定義するのではなく、フレームワークで指定されたスタイルを直接記述できます。 このような方法は非常に効率的で、たとえば、他の人が作成した UI コンポーネント (カードなど) をインポートできます。

Tailwind CSS は、スニペットを直接コピーして貼り付けてアプリのデザインに使用できるため、特に人気があります。

UI ライブラリの使用

React コンポーネントをスタイリングする最後の方法は、UI ライブラリを使用することです。 フレームワークとは異なり、UI ライブラリはスタイル ガイドラインに従います。 つまり、多くの点で、すでに決まっているスタイルが付属しています。 Mantine や Material UI などは、頼りになる選択肢の一部です。

唯一の「欠点」は、その特定のライブラリの学習にかなりの時間を費やさなければならないことです。 しかし、フレームワークについても同じことが言えます。 参入障壁はあるものの、CSS フレームワークと UI ライブラリの両方が、React コンポーネントのスタイリングにおけるゴールド スタンダードです。