EN VI

ReactJS - Styling như thế nào?

Chung quy, React cho phép các thành phần được tạo kiểu bằng cách sử dụng lớp CSS thông qua thuộc tính className. Vì JSX của React hỗ trợ biểu thức JavaScript, nhiều phương pháp CSS thông thường có thể được sử dụng. Một số phương pháp hàng đầu như sau:

  • CSS stylesheet - Các kiểu CSS thông thường kèm theo className
  • Inline styling - Kiểu CSS dưới dạng các đối tượng JavaScript kèm các thuộc tính camelCase.
  • CSS Modules - Kiểu CSS có phạm vi cục bộ.
  • Styled component - Kiểu dáng cấp thành phần.
  • Sass stylesheet - Hỗ trợ kiểu CSS dựa trên Sass bằng cách chuyển đổi các kiểu dáng thành CSS thông thường trong quá trình xây dựng.
  • Bảng xử lý stylesheet - Hỗ trợ các kiểu dáng sau khi xử lý bằng cách chuyển đổi các kiểu dáng thành CSS thông thường trong quá trình xây dựng.

Hãy cùng học cách áp dụng ba phương pháp quan trọng để tạo kiểu cho thành phần (component) của chúng ta trong bài viết này.

  • CSS Stylesheet
  • Inline Styling
  • CSS Modules

CSS Stylesheet:

CSS stylesheet là phương pháp thông thường, phổ biến và được kiểm chứng theo thời gian. Đơn giản là tạo một bảng kiểu CSS cho một thành phần và nhập tất cả các kiểu dáng cho thành phần cụ thể đó. Sau đó, trong thành phần, sử dụng className để tham chiếu đến các kiểu dáng.

Hãy tạo kiểu cho thành phần ExpenseEntryItem của chúng ta.

  1. Mở ứng dụng expense-manager trong trình soạn thảo yêu thích của bạn.

  2. Tiếp theo, mở tệp ExpenseEntryItem.css và thêm một vài kiểu dáng.

div.itemStyle { 
   color: brown; 
   font-size: 14px; 
}
  1. Tiếp theo, mở ExpenseEntryItem.js và thêm className vào bên trong container chính.
import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
  render() {
      return (
         <div className="itemStyle">
            <div><b>Mục:</b> <em>Nước ép xoài</em></div>
            <div><b>Số tiền:</b> <em>30.00</em></div>
            <div><b>Ngày chi tiêu:</b> <em>2020-10-10</em></div>
            <div><b>Danh mục:</b> <em>Thực phẩm</em></div>
         </div>
      );
   }
}

export default ExpenseEntryItem;
  1. Sau đó, chạy ứng dụng bằng lệnh npm.
npm start
  1. Mở trình duyệt và nhập http://localhost:3000 vào thanh địa chỉ và nhấn enter.

CSS stylesheet là một phương pháp dễ hiểu và sử dụng. Tuy nhiên, khi kích thước dự án tăng lên, các kiểu CSS cũng sẽ tăng và cuối cùng tạo ra rất nhiều xung đột trong tên lớp. Hơn nữa, tải tệp CSS trực tiếp chỉ được hỗ trợ trong trình đóng gói Webpack và có thể không được hỗ trợ trong các công cụ khác.


Inline Styling:

Inline Styling là một trong những cách an toàn nhất để tạo kiểu cho thành phần React. Nó khai báo tất cả các kiểu dáng dưới dạng các đối tượng JavaScript sử dụng các thuộc tính css dựa trên DOM và đặt nó vào thành phần thông qua thuộc tính kiểu.

Hãy thêm Inline Styling vào thành phần của chúng ta.

  1. Mở ứng dụng expense-manager trong trình soạn thảo yêu thích của bạn và sửa tệp ExpenseEntryItem.js trong thư mục src.const

    itemStyle = {
        color: 'brown',
        fontSize: '14px'
    }

  2. Tiếp theo, đặt kiểu itemStyle vào thành phần bằng cách sử dụng cặp ngoặc nhọn {}

render() {
   return (
      <div style={itemStyle}>
         <div><b>Mục:</b> <em>Nước ép xoài</em></div>
         <div><b>Số tiền:</b> <em>30.00</em></div>
         <div><b>Ngày chi tiêu:</b> <em>2020-10-10</em></div>
         <div><b>Danh mục:</b> <em>Thực phẩm</em></div>
      </div>
   );
}
  1. Thêm kiểu dáng trực tiếp vào thành phần
render() {
   return (
      <div style={
         {
            color: 'brown',
            fontSize: '14px'
         }         
      }>
         <div><b>Mục:</b> <em>Nước ép xoài</em></div>
         <div><b>Số tiền:</b> <em>30.00</em></div>
         <div><b>Ngày chi tiêu:</b> <em2020-10-10</em></div>
         <div><b>Danh mục:</b> <em>Thực phẩm</em></div>
      </div>
   );
}

Bây giờ, chúng ta đã thành công trong việc sử dụng Inline Styling trong ứng dụng của mình.

  1. Tiếp theo, chạy ứng dụng bằng lệnh npm.
npm start
  1. Mở trình duyệt và nhập http://localhost:3000 vào thanh địa chỉ và nhấn enter.

CSS Modules:

CSS Modules cung cấp cách an toàn và dễ nhất để định nghĩa kiểu dáng. Nó sử dụng bảng kiểu CSS bình thường với cú pháp bình thường. Khi nhập các kiểu dáng, CSS Modules chuyển đổi tất cả các kiểu dáng thành các kiểu dáng được phạm vi cục bộ để tránh xung đột tên. Hãy thay đổi thành phần của chúng ta để sử dụng CSS Modules.

  1. Mở ứng dụng expense-manager trong trình soạn thảo yêu thích của bạn.

  2. Tiếp theo, tạo một bảng kiểu dáng mới, tệp ExpenseEntryItem.module.css trong thư mục src/components và viết các kiểu dáng css thông thường.

div.itemStyle {
   color: 'brown'; 
   font-size: 14px; 
}

Ở đây, quy ước đặt tên tệp rất quan trọng. Bộ công cụ React sẽ tiền xử lý các tệp CSS kết thúc bằng .module.css thông qua CSS Module. Nếu không, nó sẽ được coi là một bảng kiểu thông thường.

  1. Tiếp theo, mở tệp ExpenseEntryItem.js trong thư mục src/component và nhập các kiểu dáng.
import styles from './ExpenseEntryItem.module.css'
  1. Sử dụng kiểu dáng như một biểu thức JavaScript trong thành phần.
<div className={styles.itemStyle}>

Bây giờ, chúng ta đã thành công trong việc sử dụng CSS Modules trong ứng dụng của mình.

Đây là mã hoàn chỉnh và cuối cùng của chúng tôi:

import React from 'react';
import './ExpenseEntryItem.css';
import styles from './ExpenseEntryItem.module.css'

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div className={styles.itemStyle} >
            <div><b>Mục:</b> <em>Nước ép xoài</em></div>
            <div><b>Số tiền:</b> <em>30.00</em></div>
            <div><b>Ngày chi tiêu:</b><em>2020-10-10</em></div>
            <div><b>Danh mục:</b> <em>Thực phẩm</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;
  1. Tiếp theo, chạy ứng dụng bằng lệnh npm.
npm start
  1. Mở trình duyệt và nhập http://localhost:3000 vào thanh địa chỉ và nhấn enter.
Comment

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login