CSS-in-JS: Penggayaan Moden untuk Aplikasi React

CSS-dalam-JS dalam React

CSS-in-JS ialah teknik di mana gaya CSS ditulis dalam fail JavaScript. Ia membolehkan pembangun menulis peraturan CSS menggunakan sintaks JavaScript, memberikan pendekatan yang lebih dinamik dan modular untuk menggayakan aplikasi React. Teknik ini telah mendapat populariti dengan peningkatan seni bina berasaskan komponen, di mana gaya merangkumi komponen individu dan bukannya helaian gaya global.

Dalam React, CSS-in-JS membolehkan gaya diikat rapat dengan komponen yang dimilikinya, memastikan gaya diselenggara dengan mudah dan berskala. Terdapat beberapa perpustakaan popular yang melaksanakan teknik ini, seperti Komponen Bergaya, Emosi dan JSS.

---

Faedah Utama CSS-in-JS

1. Gaya Skop: CSS-in-JS memastikan gaya diskop kepada komponen individu, menghapuskan kemungkinan konflik CSS global. Ini menjadikan aplikasi lebih mudah untuk diselenggara kerana gaya diasingkan dalam komponennya.

2. Penggayaan Dinamik: Dengan CSS-in-JS, mudah untuk menggunakan pembolehubah, prop dan keadaan JavaScript untuk menukar gaya secara dinamik berdasarkan logik komponen. Contohnya, anda boleh menukar warna butang berdasarkan keadaannya.

3. Penggayaan berasaskan komponen: Gaya ditulis bersama logik komponen, menjadikannya lebih mudah untuk diurus, terutamanya dalam aplikasi besar. Ini membolehkan pangkalan kod yang lebih modular dan boleh diselenggara.

4. Awalan Vendor Automatik: Banyak perpustakaan CSS-dalam-JS, seperti Komponen Bergaya dan Emosi, mengendalikan awalan vendor secara automatik, memastikan keserasian merentas penyemak imbas.

5. Tema: CSS-in-JS memudahkan untuk mencipta tema global. Anda boleh menentukan skema warna, tipografi dan gaya kongsi lain di peringkat atas dan menyuntiknya ke dalam komponen secara dinamik.

---

Pustaka CSS-dalam-JS yang popular

1. Komponen Bergaya

Komponen Bergaya ialah salah satu perpustakaan paling popular untuk CSS-in-JS. Ia membolehkan anda menulis kod CSS sebenar di dalam fail JavaScript anda, tetapi ia diskop kepada komponen individu.

Contoh: Menggunakan Komponen Bergaya

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;

Penjelasan:

• styled.button ialah fungsi yang disediakan oleh Styled Components yang membolehkan anda menentukan gaya untuk komponen butang.
• Gaya ini merangkumi komponen butang, bermakna ia tidak akan menjejaskan mana-mana butang lain pada halaman.
• Prop utama digunakan untuk menukar warna latar belakang butang secara dinamik.

---

2. Emosi

Emosi ialah satu lagi perpustakaan CSS-dalam-JS yang popular yang menyediakan penyelesaian penggayaan yang berkuasa. Ia serupa dengan Komponen Bergaya tetapi mempunyai beberapa ciri tambahan seperti pengoptimuman prestasi dan sokongan yang lebih baik untuk pemaparan sebelah pelayan.

Contoh: Menggunakan Emosi

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;

Penjelasan:

• Fungsi css daripada Emosi digunakan untuk mencipta definisi gaya, yang boleh digunakan pada komponen melalui API gaya.
• Emosi membolehkan anda menulis gaya dengan kedua-dua literal templat dan objek JavaScript.

---

3. JSS (Helaian Gaya JavaScript)

JSS ialah satu lagi perpustakaan CSS-dalam-JS yang membolehkan JavaScript digunakan untuk menulis CSS. Ia menyediakan kawalan yang lebih terperinci ke atas gaya dengan ciri seperti tema tersuai dan logik penggayaan yang lebih maju.

Contoh: Menggunakan 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;

Penjelasan:

• createUseStyles ialah cangkuk yang disediakan oleh react-jss yang menjana gaya.
• Cakuk useStyles menerima prop dan mengembalikan nama kelas untuk butang itu.
• Kaedah ini juga membenarkan gaya dinamik berdasarkan prop yang dihantar kepada komponen.

---

Cabaran CSS-in-JS

Walaupun CSS-in-JS mempunyai banyak kelebihan, ia datang dengan set cabarannya sendiri:

1. Overhed Prestasi: Pustaka CSS-dalam-JS mungkin memperkenalkan overhed prestasi, terutamanya untuk aplikasi besar dengan banyak gaya dinamik.
2. Meningkatkan Saiz Himpunan: Memandangkan gaya digabungkan bersama kod JavaScript, ia boleh meningkatkan saiz berkas JavaScript anda.
3. Keluk Pembelajaran: Untuk pembangun yang biasa dengan CSS tradisional atau aliran kerja berasaskan prapemproses (seperti Sass), peralihan kepada CSS-dalam-JS boleh memerlukan keluk pembelajaran.
4. Pemisahan Kebimbangan: Sesetengah pembangun merasakan bahawa menggabungkan gaya dan logik dalam fail yang sama melanggar prinsip pengasingan kebimbangan.

---

Amalan Terbaik untuk CSS-in-JS

1. Gunakan Tema: Manfaatkan ciri tema yang disediakan oleh perpustakaan CSS-dalam-JS untuk mengurus gaya global untuk apl anda (cth., warna, fon).
2. Kekalkan Skop Gaya: Gunakan komponen gaya atau JSS untuk memastikan gaya terskop kepada komponen yang dimiliki, menghalang gaya global daripada mengganggu satu sama lain.
3. Hadkan Penggayaan Dinamik: Gunakan gaya dinamik dengan berhati-hati, kerana penggayaan dinamik yang berlebihan mungkin menjejaskan prestasi secara negatif.
4. Gunakan Alatan yang Betul: Alat seperti Babel boleh membantu mengoptimumkan prestasi perpustakaan CSS-dalam-JS, seperti dengan mengecilkan CSS yang dijana.

---

Kesimpulan

CSS-in-JS ialah pendekatan moden untuk menggayakan aplikasi React yang menyatukan kuasa JavaScript dan CSS. Dengan menggunakan perpustakaan seperti Komponen Bergaya, Emosi atau JSS, anda boleh menulis gaya dalam fail JavaScript anda, meningkatkan modulariti, prestasi dan kebolehselenggaraan pangkalan kod anda. Walau bagaimanapun, adalah penting untuk mengimbangi penggunaan CSS-in-JS dengan kemungkinan pertimbangan prestasi, terutamanya dalam aplikasi yang lebih besar.

---

Atas ialah kandungan terperinci CSS-in-JS: Penggayaan Moden untuk Aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!