Cara yang berbeza untuk menulis CSS dalam React

Kita semua tahu cara menghubungkan lembaran gaya ke html , tetapi gaya dalam Aplikasi Single-Page React (SPA) menawarkan lebih banyak pilihan. Mari kita meneroka pelbagai pendekatan kepada CSS dalam React, menonjolkan kekuatan dan kelemahan mereka.

Mengimport stylesheets luaran

Kaedah ini mencerminkan CSS tradisional yang menghubungkan.

1. Buat fail CSS (misalnya, style.css ).
2. Tulis peraturan CSS anda.
3. Import ke dalam komponen React anda:

 import "./style.css";

Contoh:

 import bertindak balas daripada "bertindak balas";
import "./components/css/app.css";

aplikasi fungsi () {
  kembali (
    <div classname="main"></div>
  );
}

aplikasi lalai eksport;

Ini mengimport App.css dari folder /Components/css .

Gaya inline

Walaupun secara amnya tidak digalakkan untuk projek -projek besar disebabkan oleh kebimbangan pemeliharaan, gaya sebaris boleh menjadi praktikal dalam konteks tertentu. Struktur komponen React mengurangkan beberapa isu pemeliharaan.

Contoh mudah:

<div classname="main" style="{{" color:></div>

Pendekatan yang lebih teratur menggunakan objek gaya:

 import bertindak balas daripada "bertindak balas";

aplikasi fungsi () {
  gaya const = {
    Utama: {
      Latar Belakang Color: "#F1F1F1",
      Lebar: "100%",
    },
    inputText: {
      Padding: "10px",
      Warna: "merah",
    },
  };
  kembali (
    <div classname="main" style="{styles.main}"></div>
  );
}

aplikasi lalai eksport;

Ini menggunakan gaya yang ditakrifkan dalam objek styles . Perhatikan penggunaan pendakap keriting untuk rujukan objek.

Modul CSS

Modul CSS menawarkan nama kelas scoped tempatan, menghalang konflik penamaan dalam aplikasi yang lebih besar. Setiap komponen mendapat nama kelas tersendiri.

1. Buat fail .module.css (misalnya, styles.module.css ).
2. Import ke dalam komponen React anda.
3. Gunakan gaya yang diimport dengan className :

 / * styles.module.css */
.font {
  Warna: #f00;
  saiz font: 20px;
}

 import bertindak balas daripada "bertindak balas";
gaya import dari "./styles.module.css";

aplikasi fungsi () {
  kembali (
    <h1 classname="{styles.font}">Helo Dunia</h1>
  );
}

aplikasi lalai eksport;

Komponen gaya

Komponen gaya menyediakan cara untuk menulis CSS sebenar dalam JavaScript anda, mewujudkan komponen reaksi gaya. Faedah termasuk nama kelas yang unik, gaya dinamik, dan organisasi CSS yang lebih baik.

Pasang: npm install styled-components

Import: import styled from 'styled-components';

Contoh:

 import bertindak balas daripada "bertindak balas";
import yang digayakan dari "gaya-komponen";

const wrapper = styled.div`
  Lebar: 100%;
  Ketinggian: 100px;
  latar belakang warna: merah;
  paparan: blok;
`;

aplikasi fungsi () {
  kembali<wrapper></wrapper> ;
}

aplikasi lalai eksport;

Gaya bersyarat

Komponen gaya membolehkan gaya bersyarat menggunakan prop dalam CSS, membolehkan perubahan gaya dinamik berdasarkan keadaan komponen atau prop. Contoh ini menggunakan pengendali ternary untuk gaya bersyarat:

(Contoh kod yang menunjukkan gaya bersyarat yang ditinggalkan untuk keringkasan, tetapi konsep itu dijelaskan.)

Kesimpulan

React menawarkan pelbagai pilihan gaya CSS. Pendekatan terbaik bergantung kepada saiz projek, kerumitan, dan keutamaan peribadi. Gambaran keseluruhan ini memberikan asas yang kukuh untuk memilih kaedah yang tepat untuk projek React anda.

Atas ialah kandungan terperinci Cara yang berbeza untuk menulis CSS dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!