Cara menggunakan CSS dalam Pertanyaan Media dengan komponen gaya dalam React js

Langkah 1: Pasang Komponen Bergaya
Mula-mula, pastikan anda telah memasang komponen gaya dalam projek anda. Jika tidak, anda boleh memasangnya menggunakan npm atau yarn:

npm install styled-components

Langkah 2: Buat Komponen Bergaya dengan Pertanyaan Media
Anda boleh membuat komponen gaya dan menggunakan pertanyaan media di dalamnya. Berikut ialah contoh komponen Bekas responsif yang menukar warna latar belakangnya berdasarkan lebar skrin:

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;

Penjelasan
Import Komponen Bergaya: Import objek bergaya daripada komponen bergaya.
Buat Komponen Bergaya: Tentukan komponen Bekas gaya. Bekas akan mempunyai warna latar belakang lalai biru muda.
Tambahkan Pertanyaan Media:
Untuk skrin dengan lebar maksimum 768px, tukar warna latar belakang kepada lightcoral.
Untuk skrin dengan lebar maksimum 480px, tukar warna latar belakang kepada hijau muda.
Gunakan Komponen Bergaya: Gunakan komponen Bekas dalam komponen Apl anda. Mana-mana kandungan di dalam Bekas akan mempunyai gaya yang digunakan padanya, termasuk pertanyaan media.

Langkah 3: Buat Apl
Apabila anda menjalankan aplikasi React anda, anda sepatutnya melihat Bekas menukar warna latar belakangnya berdasarkan lebar skrin:

Lalai: biru muda
Lebar maksimum 768px: lightcoral
Lebar maksimum 480px: hijau muda
Dengan cara ini, anda boleh menambah gaya responsif dengan mudah pada komponen React anda menggunakan Pertanyaan Media CSS dengan Komponen Bergaya.

Petua Tambahan
Anda boleh menambah gaya yang lebih kompleks dan pertanyaan media mengikut keperluan.
Menggabungkan pertanyaan media dengan ciri komponen gaya yang lain (mis., tema) boleh menjadikan gaya anda lebih hebat dan boleh diselenggara.

Atas ialah kandungan terperinci Cara menggunakan CSS dalam Pertanyaan Media dengan komponen gaya dalam React js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!