React の CSS-in-JS

CSS-in-JS は、CSS スタイルを JavaScript ファイル內(nèi)に記述する手法です。これにより、開発者は JavaScript 構(gòu)文を使用して CSS ルールを作成できるようになり、React アプリケーションのスタイルを設(shè)定するためのより動(dòng)的でモジュール式のアプローチが提供されます。この手法は、スタイルの範(fàn)囲がグローバル スタイルシートではなく個(gè)々のコンポーネントに限定される、コンポーネントベースのアーキテクチャの臺(tái)頭とともに人気が高まっています。

React では、CSS-in-JS により、スタイルをそのスタイルが屬するコンポーネントと密接に結(jié)び付けることができ、スタイルの維持とスケーラビリティが容易になります。 Styled Components、Emotion、JSS など、この手法を?qū)g裝する一般的なライブラリがいくつかあります。

---

CSS-in-JS の主な利點(diǎn)

1. スコープ付きスタイル: CSS-in-JS により、スタイルのスコープが個(gè)々のコンポーネントに限定され、グローバルな CSS 競(jìng)合の可能性が排除されます。これにより、スタイルがコンポーネント內(nèi)で分離されるため、アプリケーションの保守が容易になります。

2. 動(dòng)的スタイリング: CSS-in-JS を使用すると、JavaScript の変數(shù)、小道具、狀態(tài)を簡(jiǎn)単に使用して、コンポーネントのロジックに基づいてスタイルを動(dòng)的に変更できます。たとえば、ボタンの狀態(tài)に基づいてボタンの色を変更できます。

3. コンポーネントベースのスタイリング: スタイルはコンポーネント ロジックと一緒に記述されるため、特に大規(guī)模なアプリケーションでの管理が容易になります。これにより、よりモジュール化され保守しやすいコードベースが可能になります。

4. 自動(dòng)ベンダー プレフィックス: Styled Components や Emotion などの多くの CSS-in-JS ライブラリは、ベンダー プレフィックスを自動(dòng)的に処理し、ブラウザ間の互換性を確保します。

5. テーマ: CSS-in-JS を使用すると、グローバル テーマを簡(jiǎn)単に作成できます。カラースキーム、タイポグラフィー、その他の共有スタイルをトップレベルで定義し、それらをコンポーネントに動(dòng)的に挿入できます。

---

人気のある CSS-in-JS ライブラリ

1. スタイル付きコンポーネント

Styled Components は、CSS-in-JS の最も人気のあるライブラリの 1 つです。これにより、JavaScript ファイル內(nèi)に実際の CSS コードを記述することができますが、スコープは個(gè)々のコンポーネントに限定されます。

例: スタイル付きコンポーネントの使用

npm install styled-components

import React from 'react';
import styled from 'styled-components';

// Create a styled component
const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

説明:

• styled.button は、ボタン コンポーネントのスタイルを定義できるようにする Styled Components によって提供される関數(shù)です。
• スタイルの範(fàn)囲はボタン コンポーネントに限定されます。つまり、ページ上の他のボタンには影響しません。
• プライマリ プロップは、ボタンの背景色を動(dòng)的に変更するために使用されます。

---

2. 感情

Emotion も、強(qiáng)力なスタイル ソリューションを提供する人気のある CSS-in-JS ライブラリです。これはスタイル付きコンポーネントに似ていますが、パフォーマンスの最適化やサーバー側(cè)レンダリングのサポートの強(qiáng)化など、いくつかの追加機(jī)能があります。

例: 感情の使用

npm install @emotion/react @emotion/styled

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyle = (primary) => css`
  background-color: ${primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const Button = styled.button`
  ${props => buttonStyle(props.primary)}
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

説明:

• Emotion の CSS 関數(shù)を使用してスタイル定義を作成し、スタイル定義 API を介してコンポーネントに適用できます。
• Emotion を使用すると、テンプレート リテラルと JavaScript オブジェクトの両方を使用してスタイルを作成できます。

---

3. JSS (JavaScript スタイルシート)

JSS は、JavaScript を使用して CSS を作成できるようにするもう 1 つの CSS-in-JS ライブラリです。カスタム テーマやより高度なスタイリング ロジックなどの機(jī)能を使用して、スタイルをより詳細(xì)に制御できます。

例: JSS の使用

npm install jss react-jss

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: (props) => (props.primary ? 'blue' : 'gray'),
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    '&:hover': {
      opacity: 0.8,
    },
  },
});

const Button = (props) => {
  const classes = useStyles(props);

  return <button className={classes.button}>{props.children}</button>;
};

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

説明:

• createUseStyles は、react-jss が提供するスタイルを生成するフックです。
• useStyles フックは props を受け取り、ボタンのクラス名を返します。
• このメソッドでは、コンポーネントに渡された props に基づいた動(dòng)的なスタイルも可能になります。

---

JS 內(nèi)の CSS の課題

CSS-in-JS には多くの利點(diǎn)がありますが、獨(dú)自の一連の課題も伴います。

1. パフォーマンス オーバーヘッド: CSS-in-JS ライブラリでは、特に多くの動(dòng)的スタイルを含む大規(guī)模なアプリケーションの場(chǎng)合、パフォーマンス オーバーヘッドが発生する可能性があります。
2. バンドル サイズの増加: スタイルは JavaScript コードと一緒にバンドルされるため、JavaScript バンドルのサイズが増加する可能性があります。
3. 學(xué)習(xí)曲線: 従來(lái)の CSS またはプリプロセッサベースのワークフロー (Sass など) に慣れている開発者にとって、CSS-in-JS への移行には學(xué)習(xí)曲線が必要になる場(chǎng)合があります。
4. 懸念事項(xiàng)の分離: 一部の開発者は、同じファイル內(nèi)でスタイルとロジックを組み合わせると懸念事項(xiàng)の分離の原則に違反すると感じています。

---

JS 內(nèi)の CSS のベスト プラクティス

1. テーマを使用する: CSS-in-JS ライブラリによって提供されるテーマ機(jī)能を利用して、アプリのグローバル スタイル (色、フォントなど) を管理します。
2. スタイルのスコープを維持する: styled-components または JSS を使用して、スタイルのスコープをその屬するコンポーネントに保ち、グローバル スタイルが相互に干渉するのを防ぎます。
3. 動(dòng)的スタイルを制限する: 過(guò)度の動(dòng)的スタイルはパフォーマンスに悪影響を與える可能性があるため、動(dòng)的スタイルは控えめに使用してください。
4. 適切なツールを使用する: Babel のようなツールは、生成された CSS を縮小するなどして、CSS-in-JS ライブラリのパフォーマンスを最適化するのに役立ちます。

---

結(jié)論

CSS-in-JS は、JavaScript と CSS の力を組み合わせた、React アプリケーションのスタイルを設(shè)定するための最新のアプローチです。 Styled Components、Emotion、または JSS などのライブラリを使用すると、JavaScript ファイル內(nèi)にスタイルを記述して、コードベースのモジュール性、パフォーマンス、保守性を向上させることができます。ただし、特に大規(guī)模なアプリケーションでは、CSS-in-JS の使用と潛在的なパフォーマンスの考慮事項(xiàng)のバランスをとることが重要です。

---

以上がCSS-in-JS: React アプリケーションの最新のスタイルの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。