CSS trong React

Cách sử dụng CSS để tạo kiểu ứng dụng React

Sử dụng React, bạn có nhiều cách khác nhau để thêm kiểu dáng cho các thành phần của mình.

Sử dụng các lớp và CSS

Đầu tiên và đơn giản nhất là sử dụng các lớp và sử dụng tệp CSS bình thường để nhắm mục tiêu các lớp đó:

const Button = () => {
  return <button className="button">A button</button>
}

.button {
  background-color: yellow;
}

Bạn có thể nhập biểu định kiểu bằng cách sử dụng câu lệnh nhập, như sau:

import './style.css'

vàWebpacksẽ đảm nhận việc thêm thuộc tính CSS vào gói.

Sử dụng thuộc tính style

Phương pháp thứ hai là sử dụngstylethuộc tính được đính kèm với một phần tử JSX. Sử dụng phương pháp này, bạn không cần tệp CSS riêng biệt.

const Button = () => {
  return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}

CSS được định nghĩa theo một cách hơi khác bây giờ. Đầu tiên, hãy chú ý đến dấu ngoặc nhọn kép: đó là vìstylechấp nhận một đối tượng. Chúng tôi truyền vào một đối tượng JavaScript, được định nghĩa trong dấu ngoặc nhọn. Chúng tôi cũng có thể làm điều này:

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
  return <button style={buttonStyle}>A button</button>
}

Khi đang sử dụngcreate-react-app, những kiểu đó được tự động sửa lỗi theo mặc định nhờ vào việc sử dụngTrình sửa lỗi tự động.

Ngoài ra, phong cách bây giờ là CamelCased thay vì sử dụng dấu gạch ngang. Mỗi khi thuộc tính CSS có dấu gạch ngang, hãy xóa nó và bắt đầu viết hoa từ tiếp theo.

Kiểu có lợi ích là cục bộ của thành phần và chúng không thể bị rò rỉ sang các thành phần khác trong các phần khác của ứng dụng, điều mà việc sử dụng các lớp và tệp CSS bên ngoài không thể cung cấp.

Sử dụng mô-đun CSS

Mô-đun CSSdường như là một điểm hoàn hảo ở giữa: bạn sử dụng các lớp, nhưng CSS được đặt trong phạm vi thành phần, có nghĩa là bất kỳ kiểu dáng nào bạn thêm vào đều không thể được áp dụng cho các thành phần khác mà không có sự cho phép của bạn. Tuy nhiên, các kiểu của bạn được xác định trong một tệp CSS riêng biệt, dễ bảo trì hơn so với CSS trong JavaScript (và bạn có thể sử dụng các tên thuộc tính CSS cũ tốt của mình).

Bắt đầu bằng cách tạo một tệp CSS kết thúc bằng.module.css, ví dụButton.module.css. Một lựa chọn tuyệt vời là đặt nó cùng tên với thành phần bạn định tạo kiểu

Thêm CSS của bạn tại đây, sau đó nhập nó vào bên trong tệp thành phần mà bạn muốn tạo kiểu:

import style from './Button.module.css'

bây giờ bạn có thể sử dụng nó trong JSX của mình:

const Button = () => {
  return <button className={style.content}>A button</button>
}

Đó là nó! Trong đánh dấu kết quả, React sẽ tạo ra một lớp cụ thể, duy nhất cho mỗi thành phần được hiển thị và gán CSS cho lớp đó, để CSS không ảnh hưởng đến đánh dấu khác.

CSS Modules in React

Tải xuống miễn phí của tôiSổ tay React

CSS trong React

Cách sử dụng CSS để tạo kiểu ứng dụng React

Sử dụng các lớp và CSS

Sử dụng thuộc tính style

Sử dụng mô-đun CSS

Các hướng dẫn về phản ứng khác: