Biểu định kiểu Reacjs

Shedrack Akintayo là một kỹ sư phần mềm đến từ Lagos, Nigeria, người yêu thích việc xây dựng cộng đồng, mã nguồn mở và sáng tạo nội dung cũng như công nghệ cho thế hệ tiếp theo … Thông tin thêm về Shedrack ↬

Bản tin email

Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

• 
  Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

• 
  Giao diện người dùng SmashingConf 2023

• 
  Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

• 
  Bắt đầu miễn phí

• 
  Hệ thống thiết kế thành công

Việc tạo kiểu cho các thành phần React qua nhiều năm đã được cải thiện và trở nên dễ dàng hơn nhiều với các kỹ thuật và chiến lược khác nhau. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo kiểu cho các thành phần React bằng bốn chiến lược tạo kiểu chính — với các ví dụ về cách sử dụng chúng. Trong quá trình này, tôi sẽ giải thích nhược điểm và ưu điểm của các chiến lược tạo kiểu này và khi kết thúc hướng dẫn này, bạn sẽ biết tất cả về cách tạo kiểu cho các thành phần React và cách chúng hoạt động cùng với các phương thức khác nhau có thể được sử dụng để tạo kiểu cho các thành phần này

Ghi chú. Hiểu biết cơ bản về ReactJS và CSS sẽ rất tốt cho hướng dẫn này

'Tạo kiểu' trong các ứng dụng React có nghĩa là gì?

Lý do bạn tạo kiểu cho ứng dụng React của mình không khác với lý do bạn nghĩ đến khi tạo kiểu cho các trang web hoặc ứng dụng web khác mà bạn đang làm việc trên đó. Tạo kiểu trong các ứng dụng React mô tả cách các thành phần hoặc phần tử React được hiển thị trên màn hình hoặc bất kỳ phương tiện nào khác

Toàn bộ bản chất của việc xây dựng giao diện người dùng giao diện người dùng với React là mức độ linh hoạt của việc xây dựng các giao diện người dùng này, đặc biệt là dưới dạng các thành phần và cũng tạo kiểu cho chúng để mang đến cho chúng ta giao diện và trải nghiệm tuyệt vời. Điều quan trọng cần biết là bất kỳ chiến lược tạo kiểu nào bạn có thể quyết định sử dụng vẫn là CSS — bạn đang viết CSS như bạn vẫn luôn làm. Sự khác biệt là các chiến lược (mà chúng ta sẽ xem xét) giúp quá trình này trở nên dễ dàng nhờ tính độc đáo của React

Các chiến lược tạo kiểu chính trong React

Có nhiều chiến lược khác nhau để tuân theo khi lập kế hoạch tạo kiểu cho các thành phần React, những chiến lược này cũng đã tăng lên và phát triển qua nhiều năm. Trong hướng dẫn này, chúng ta sẽ nói về các chiến lược tạo kiểu hiện đại và phổ biến nhất cũng như cách sử dụng chúng để tạo kiểu cho các thành phần React của chúng ta. Những chiến lược phong cách này bao gồm

1. 
   Điều này liên quan đến việc sử dụng các biểu định kiểu riêng biệt giống như cách thông thường để tạo kiểu cho các trang web HTML của chúng tôi bằng CSS hoặc bộ tiền xử lý CSS có tên là SASS
2. 
   Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định
3. 
   styled-components là một thư viện dành cho React và React Native cho phép bạn sử dụng các kiểu ở cấp độ thành phần trong ứng dụng của mình được viết bằng hỗn hợp JavaScript và CSS bằng kỹ thuật có tên là CSS-in-JS
4. 
   JSS là một công cụ soạn thảo dành cho CSS cho phép bạn sử dụng JavaScript để mô tả các kiểu theo cách khai báo, không xung đột và có thể tái sử dụng. Nó có thể biên dịch trong trình duyệt, phía máy chủ hoặc tại thời điểm xây dựng trong Node

Trong phần tiếp theo của hướng dẫn này, chúng ta sẽ nói về từng chiến lược tạo kiểu này với các ví dụ về cú pháp của chúng

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Nâng cao kỹ năng UX của bạn với Mẫu thiết kế giao diện thông minh, thư viện video 9 giờ của Vitaly Friedman. Với hàng trăm ví dụ thực tế, hướng dẫn thiết kế và đào tạo UX trực tiếp thân thiện. Kiểm tra bản xem trước miễn phí

1. Biểu định kiểu CSS và SASS

Biểu định kiểu CSS hoặc SCSS là một chiến lược tạo kiểu liên quan đến việc sử dụng các biểu định kiểu CSS hoặc SASS bên ngoài có thể được nhập vào các thành phần React của bạn tùy thuộc vào nơi bạn cần áp dụng kiểu đó

Ví dụ: chúng tôi có tệp SASS gồm các kiểu có tên là

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

// Box.scss
.Box {
  margin: 40px;
  border: 5px black;
}

.Box_content {
  font-size: 16px;
  text-align: center;
}

Để sử dụng kiểu dáng này bên trong thành phần Hộp của chúng tôi, tất cả những gì chúng tôi cần làm là nhập tệp SASS trực tiếp vào thành phần

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Sau khi tạo các kiểu và nhập nó vào tệp

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Trong khi sử dụng chiến lược này, bạn cũng có thể tận dụng các khuôn khổ hiện có như; . Các khung này cung cấp cho bạn các lớp và thành phần hiện có mà bạn có thể cắm vào ứng dụng React của mình mà không cần tạo kiểu cho mọi khía cạnh của ứng dụng

Lợi ích của việc sử dụng CSS và SASS Stylesheets

1. Nó phổ biến hơn nhiều so với các chiến lược tạo kiểu còn lại, vì vậy có rất nhiều tài nguyên hữu ích khi bạn gặp lỗi
2. Bộ nhớ đệm & Hiệu suất
   Các tệp CSS tiêu chuẩn giúp trình duyệt dễ dàng tối ưu hóa, lưu các tệp vào bộ nhớ đệm cục bộ để truy cập lại và cuối cùng mang lại hiệu suất cao.
3. Un-opinionated and Universal
   CSS và SASS là phổ biến và không có ý kiến ​​về cách bạn hiển thị giao diện người dùng của mình, khiến nó trở thành lựa chọn tuyệt vời cho các nhóm có CSS ​​cũ và đang chuyển sang .
4. Nhanh chóng lặp lại một thiết kế mới
   Bạn có thể dễ dàng trích xuất toàn bộ biểu định kiểu và tạo một biểu định kiểu mới để làm mới giao diện của ứng dụng mà không cần tìm hiểu qua hàng trăm thành phần tiềm năng.
5. Khung CSS
   Khung CSS rất hữu ích nếu bạn là nhà phát triển mới hoặc bạn muốn nhanh chóng làm việc trên một nguyên mẫu mà không cần đi sâu vào viết biểu định kiểu toàn diện của riêng mình. Các khung CSS sẽ cung cấp cho bạn các khối xây dựng để đưa ý tưởng của bạn ra khỏi mặt đất. Một số khung này bao gồm, Bootstrap, Bulma, Semantic UI, Materialize.

Những thiếu sót khi sử dụng CSS và SASS Stylesheets

1. Khả năng đọc
   Nếu không được cấu trúc phù hợp, biểu định kiểu CSS hoặc SASS có thể trở nên dài và khó điều hướng khi ứng dụng trở nên phức tạp.
2. CSS kế thừa có thể tồn tại trong nhiều năm
   Hầu hết các biểu định kiểu thực sự lớn này có thể trở nên phức tạp và lâu đến mức việc dọn dẹp các kiểu cũ, lỗi thời hoặc thậm chí không được sử dụng có thể là một công việc khó khăn.

Ghi chú. “Sass có hai cú pháp. Cú pháp được sử dụng phổ biến nhất được gọi là “SCSS” (viết tắt của “Sassy CSS”) và là siêu bộ cú pháp CSS. Điều này có nghĩa là mọi biểu định kiểu CSS hợp lệ cũng là SCSS hợp lệ. Các tệp SCSS sử dụng phần mở rộng. scss.
Cú pháp thứ hai, cũ hơn được gọi là cú pháp thụt lề (hoặc chỉ “. ngổ ngáo”). Lấy cảm hứng từ sự ngắn gọn của Haml, nó dành cho những người thích sự đồng nhất hơn là sự tương đồng với CSS. Thay vì dấu ngoặc và dấu chấm phẩy, nó sử dụng thụt đầu dòng để chỉ định các khối. Các tệp trong cú pháp thụt lề sử dụng phần mở rộng. ngổ ngáo. ”

Mô-đun CSS

Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định. Khi sử dụng Mô-đun CSS, mỗi thành phần React được cung cấp tệp CSS riêng, tệp này chỉ nằm trong phạm vi của tệp và thành phần đó

Vẻ đẹp của các mô-đun CSS xảy ra tại thời điểm xây dựng khi các tên lớp cục bộ có thể cực kỳ đơn giản mà không có xung đột được ánh xạ trực tiếp tới các tên được tạo tự động và được xuất dưới dạng đối tượng JS theo nghĩa đen để sử dụng trong React

Chúng tôi có thể sử dụng các Mô-đun CSS trong các ứng dụng React của mình bằng cách nhập tệp trực tiếp vào tệp thành phần

Ví dụ: mã bên dưới là một ví dụ về cách sử dụng mô-đun CSS trong Thành phần phản ứng

//Box.css
 :local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Khi sử dụng webpack, bạn có thể thêm trình tải và cũng có thể thêm mô-đun vào

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Mặt khác, để sử dụng Mô-đun CSS này bên trong thành phần Hộp của chúng tôi, chúng tôi cần nhập tệp mô-đun trực tiếp vào thành phần

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

//Box.css
 :local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

//Box.css
 :local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

//Box.css
 :local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

//Box.css
 :local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

Lợi ích của việc sử dụng các mô-đun CSS

1. CSS mô-đun và có thể tái sử dụng,
2. Không còn xung đột về kiểu dáng,
3. Phụ thuộc rõ ràng,
4. Phạm vi địa phương,
5. Rõ ràng phụ thuộc,
6. Không sao chép Mã trong trường hợp SSR,
7. Không có chi phí bổ sung trong tải trọng JS,
8. Biến, Chia sẻ biến trong CSS và hiển thị nó với JavaScript

Những thiếu sót khi sử dụng Mô-đun CSS

1. Các công cụ xây dựng bổ sung (e. g. gói web)
2. Trộn các Mô-đun CSS và các lớp CSS toàn cầu rất cồng kềnh
3. Khi một

   //Box.css
    :local(.container) {
      margin: 40px;
      border: 5px dashed pink;
    }
    :local(.content) {
      font-size: 15px;
      text-align: center;
    }

   8 được tạo cho một Mô-đun CSS không xác định, nó sẽ phân giải thành không xác định mà không có cảnh báo
4. Sử dụng đối tượng

   //Box.css
    :local(.container) {
      margin: 40px;
      border: 5px dashed pink;
    }
    :local(.content) {
      font-size: 15px;
      text-align: center;
    }

   2 bất cứ khi nào xây dựng một

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   6 là bắt buộc
5. Chỉ cho phép sử dụng tên lớp CSS

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   01

import React from 'react'; import './Box.css'; const Box = () => ( <div className="Box"> <p className="Box_content"> Styling React Components </p> </div> ); export default Box;1

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Nó được tạo với cùng một phương thức hoạt động của Mô-đun CSS, một cách để viết CSS trong phạm vi một thành phần và không thể truy cập được đối với bất kỳ thành phần nào khác trong trang hoặc thậm chí thành phần

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Ví dụ: nếu chúng tôi cần triển khai kiểu dáng trong tệp

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

• Đầu tiên, chúng ta cần cài đặt thư viện

  import React from 'react';
  import './Box.css';
  
  const Box = () => (
    <div className="Box">
      <p className="Box_content"> Styling React Components </p>
    </div>
  );
  
  export default Box;

  1 bằng cách chạy

  import React from 'react';
  import './Box.css';
  
  const Box = () => (
    <div className="Box">
      <p className="Box_content"> Styling React Components </p>
    </div>
  );
  
  export default Box;

  07
• Sau đó, chúng tôi cần nhập thư viện thành phần được tạo kiểu vào thành phần của mình bằng cách viết

  import React from 'react';
  import './Box.css';
  
  const Box = () => (
    <div className="Box">
      <p className="Box_content"> Styling React Components </p>
    </div>
  );
  
  export default Box;

  08
• Bây giờ chúng ta có thể tạo một biến bằng cách chọn một thành phần HTML cụ thể nơi chúng ta lưu trữ các khóa kiểu của mình
• Sau đó, chúng tôi sử dụng tên của biến mà chúng tôi đã tạo làm trình bao bọc xung quanh các phần tử JSX của mình

Đoạn mã dưới đây là một triển khai của tất cả các bước chúng tôi đã đề cập ở trên

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Trong đoạn mã trên, chúng tôi nhập đối tượng

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Lợi ích của việc sử dụng styled-components

1. Tính nhất quán
   

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   1 giúp bạn dễ dàng xuất bản thành phần React lên NPM. Các thành phần này có thể được tùy chỉnh thông qua các đạo cụ và/hoặc mở rộng qua

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   45 và không xung đột với bộ chọn CSS.
2. Sass Syntax Out-Of-The-Box
   Bạn có thể sử dụng cú pháp nhãn hiệu SASS ngay lập tức mà không cần phải cài đặt hay thiết lập SASS hay bất kỳ công cụ xây dựng bổ sung nào.
3. Tạo kiểu động
   Bạn có thể sử dụng các đạo cụ để thay đổi động các kiểu theo bất kỳ cách nào cảm thấy tự nhiên đối với bất kỳ ai cảm thấy thoải mái với React.
4. Chủ đề
   Sử dụng API ngữ cảnh của React, styled-components cung cấp một

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   46 mà bạn có thể chuyển trực tiếp đối tượng chủ đề tới, làm cho đối tượng đó rất dễ truy cập trong bất kỳ thành phần nào của bạn và theo mặc định .

Những thiếu sót của việc sử dụng các thành phần theo kiểu

1. Đường cong học tập
   Các nhà phát triển giao diện người dùng đã quen với việc viết CSS truyền thống sẽ phải học một cách tạo kiểu khác với cách viết CSS truyền thống.
2. Tích hợp với Legacy CSS có thể gây khó khăn.
   Nếu bạn đang sử dụng thư viện giao diện người dùng như UI UI hoặc thậm chí là CSS truyền thống, việc tích hợp các thành phần kiểu dáng cùng với chúng có thể gây nhầm lẫn khi định vị và gỡ lỗi kiểu.
3. Hiệu suất
   styled-components chuyển đổi tất cả các định nghĩa về kiểu dáng trong thành phần React của bạn thành CSS đơn giản tại thời điểm xây dựng và đưa mọi thứ vào các thẻ

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   47 trong phần đầu của tệp

   import React from 'react';
   import './Box.css';
   
   const Box = () => (
     <div className="Box">
       <p className="Box_content"> Styling React Components </p>
     </div>
   );
   
   export default Box;

   48 của bạn. Điều này ảnh hưởng đến hiệu suất theo nghĩa là nó không chỉ làm tăng kích thước tệp HTML của chúng tôi, điều này có thể ảnh hưởng đến thời gian tải mà còn không có cách nào để phân đoạn CSS đầu ra.

JSS

JSS là một công cụ soạn thảo dành cho CSS cho phép bạn sử dụng JavaScript để mô tả các kiểu theo cách khai báo, không xung đột và có thể tái sử dụng. Nó có thể biên dịch trong trình duyệt, phía máy chủ hoặc tại thời điểm xây dựng trong Node. JSS là một chiến lược tạo kiểu mới chưa được điều chỉnh nhiều. Đó là khuôn khổ bất khả tri và bao gồm nhiều gói. cốt lõi, plugin, tích hợp khung và những thứ khác

JSS có các bộ điều hợp API bên thứ ba có thể được sử dụng để viết các kiểu giống như JSS nhưng khác, các bộ điều hợp API bên thứ ba này bao gồm

• JSS được tạo kiểu
  Đây là bộ điều hợp API thành phần được tạo kiểu.
• Glamour-JSS
  CSS có hương vị quyến rũ với JSS chuyên sâu.
• Aphrodite-JSS
  Aphrodite like API.

Phản ứng-JSS

React-JSS sử dụng JSS với React bằng API Hooks mới. JSS và cài đặt trước mặc định đã được tích hợp sẵn trong thư viện. Theo tài liệu React-JSS chính thức, sau đây là những lợi ích của việc sử dụng React-JSS thay vì thư viện JSS cốt lõi trong các thành phần React của bạn

• Chủ đề động
  Điều này cho phép truyền tải chủ đề dựa trên ngữ cảnh và cập nhật thời gian chạy.
• Trích xuất CSS quan trọng
  CSS duy nhất từ ​​các thành phần kết xuất được trích xuất.
• Đánh giá lười biếng
  Biểu định kiểu được tạo khi một thành phần gắn kết và bị xóa khi nó không được gắn kết.
• Phần tĩnh của Biểu định kiểu sẽ được chia sẻ giữa tất cả các phần tử
• Các giá trị và quy tắc của hàm được cập nhật tự động với bất kỳ dữ liệu nào bạn chuyển đến

  import React from 'react';
  import './Box.css';
  
  const Box = () => (
    <div className="Box">
      <p className="Box_content"> Styling React Components </p>
    </div>
  );
  
  export default Box;

  49. Bạn có thể chuyển đạo cụ, trạng thái hoặc bất kỳ thứ gì từ ngữ cảnh chẳng hạn

Đoạn mã dưới đây là một ví dụ về cách React-JSS được sử dụng

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Trong đoạn mã trên, hơi giống với việc sử dụng các thành phần được tạo kiểu, chúng tôi nhập

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

//Box.css
 :local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Đoạn mã trên là thành phần React chính chưa được chèn đối tượng kiểu mà chúng ta đã tạo, nó chứa mã chính cho thành phần React của chúng ta và nó sẽ được tạo kiểu khi chúng ta thêm đối tượng kiểu mà chúng ta đã tạo

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Dòng mã ở trên đang đưa các kiểu mà chúng ta đã tạo vào thành phần mà chúng ta đã tạo nó để sử dụng hàm

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Đoạn mã trên giữ đối tượng chủ đề sẽ được chuyển đến

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Trong phần mã này, những gì chúng tôi đang làm ở đây là sử dụng

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_content"> Styling React Components </p>
  </div>
);

export default Box;

Khi kết thúc kết xuất, đây là những gì sẽ được hiển thị trong trình duyệt của bạn

Lợi ích của JSS

1. Xác định phạm vi cục bộ
   JSS hỗ trợ xác định phạm vi cục bộ, đưa nó lên cấp độ tiếp theo bằng cách tự động hóa phạm vi, dẫn đến khả năng dự đoán cao.
2. Đóng gói
   Việc đóng gói tạo điều kiện bảo trì và loại bỏ lỗi, vì bạn có thể sửa đổi tất cả mã và kiểu liên quan đến thành phần ở cùng một nơi mà không phải lo lắng về việc thay đổi bất ngờ các phần khác của ứng dụng.
3. Khả năng sử dụng lại
   Các thành phần có thể tái sử dụng, vì vậy bạn chỉ phải viết chúng một lần, sau đó bạn có thể chạy chúng ở mọi nơi trong khi vẫn duy trì kiểu dáng của chúng.
4. Tạo kiểu động
   Bạn có thể sử dụng các đạo cụ để thay đổi động các kiểu theo bất kỳ cách nào cảm thấy tự nhiên đối với bất kỳ ai cảm thấy thoải mái với React.

Những thiếu sót của JSS

1. Đường cong học tập
   Học JSS có thể rất phức tạp, đặc biệt là các nhà phát triển giao diện người dùng đã quen với việc viết CSS truyền thống.
2. Lớp phức tạp bổ sung
   Việc đưa thư viện CSS-in-JS vào sử dụng sẽ thêm một lớp bổ sung vào ứng dụng React của bạn, điều này đôi khi có thể không cần thiết.
3. Khả năng đọc mã
   Bộ chọn tùy chỉnh hoặc được tạo tự động có thể rất khó đọc, đặc biệt là khi sử dụng công cụ phát triển trình duyệt của bạn để gỡ lỗi.

Phần kết luận

Mỗi trong số này đều có ưu điểm và nhược điểm, và tất cả phụ thuộc vào sở thích cá nhân/công ty của bạn và mức độ phức tạp của ứng dụng của bạn. Ngoài ra, bất kỳ chiến lược tạo kiểu nào bạn có thể quyết định sử dụng, về cơ bản nó vẫn là CSS. Bạn có thể viết CSS như bạn vẫn thường làm, nhưng React và các thư viện khác cung cấp các giải pháp cũng có thể giúp tạo kiểu

Tôi hy vọng bạn thích làm việc thông qua hướng dẫn này. Bạn luôn có thể đọc thêm về Tạo kiểu cho các Thành phần Phản ứng từ các tài liệu tham khảo bên dưới. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại nhận xét bên dưới và tôi sẽ sẵn lòng trả lời từng câu hỏi

Có biểu định kiểu trong React không?

Làm cách nào để cài đặt CSS trong React?

Cách tốt nhất để tạo kiểu trong React là gì?