React js のスタイル付きコンポーネントを使用してメディア クエリで CSS を使用する方法

ステップ 1: スタイル付きコンポーネントをインストールする
まず、スタイル付きコンポーネントがプロジェクトにインストールされていることを確認してください。そうでない場合は、npm または Yarn を使用してインストールできます:

npm install styled-components

ステップ 2: メディア クエリを使用してスタイル付きコンポーネントを作成する
スタイル付きコンポーネントを作成し、その中でメディア クエリを使用できます。以下は、画面の幅に基づいて背景色を変更するレスポンシブなコンテナ コンポーネントの例です。

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

// Define the styled component with media queries
const Container = styled.div`
  width: 100%;
  height: 100vh;
  background-color: lightblue;

  @media (max-width: 768px) {
    background-color: lightcoral;
  }

  @media (max-width: 480px) {
    background-color: lightgreen;
  }
`;

const App = () => {
  return (
    <Container>
      <h1>Hello, World!</h1>
    </Container>
  );
};

export default App;

説明
スタイル付きコンポーネントのインポート: スタイル付きオブジェクトを styled-components からインポートします。
スタイル付きコンポーネントの作成: スタイル付きコンテナ コンポーネントを定義します。コンテナのデフォルトの背景色は水色です。
メディア クエリの追加:
最大幅が 768 ピクセルの画面の場合は、背景色をライトコーラルに変更します。
最大幅が 480 ピクセルの画面の場合は、背景色をライトグリーンに変更します。
スタイル付きコンポーネントを使用します: App コンポーネントで Container コンポーネントを使用します。コンテナ内のすべてのコンテンツには、メディア クエリを含むスタイルが適用されます。

ステップ 3: アプリをレンダリングする
React アプリケーションを実行すると、コンテナの背景色が画面の幅に基づいて変更されることがわかります。

デフォルト: ライトブルー
最大幅 768px: ライトコーラル
最大幅 480px: ライトグリーン
このようにして、スタイル付きコンポーネントを含む CSS メディア クエリを使用して、React コンポーネントにレスポンシブ スタイルを簡単に追加できます。

追加のヒント
必要に応じて、より複雑なスタイルやメディア クエリを追加できます。
メディア クエリを他のスタイル コンポーネント機能 (テーマなど) と組み合わせると、スタイルをさらに強力かつ保守しやすくすることができます。

以上がReact js のスタイル付きコンポーネントを使用してメディア クエリで CSS を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。