Tạo kiểu React bằng CSS
Có nhiều cách để tạo kiểu cho React bằng CSS, hướng dẫn này sẽ xem xét kỹ hơn ba cách phổ biến:
- Kiểu dáng nội tuyến
- Bảng định kiểu CSS
- Mô-đun CSS
Tạo kiểu nội tuyến
Để tạo kiểu cho một phần tử bằng thuộc tính kiểu nội tuyến, giá trị phải là đối tượng JavaScript:
Ví dụ:
Chèn một đối tượng với thông tin kiểu dáng:
const Header = () => { return ( <> <h1 style={{color: "red"}}>Hello Style!</h1> <p>Add a little style!</p> </> ); } Lưu ý: Trong JSX, các biểu thức JavaScript được viết bên trong dấu ngoặc nhọn và vì các đối tượng JavaScript cũng sử dụng dấu ngoặc nhọn nên kiểu dáng trong ví dụ trên được viết bên trong hai bộ dấu ngoặc nhọn {{}} .
Tên thuộc tính của CamelCased
Vì CSS nội tuyến được viết bằng đối tượng JavaScript nên các thuộc tính có dấu phân cách dấu gạch nối, như background-color , phải được viết bằng cú pháp viết hoa kiểu lạc đà:
Ví dụ:
Sử dụng backgroundColor thay vì background-color :
const Header = () => { return ( <> <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1> <p>Add a little style!</p> </> ); }Đối tượng JavaScript
Bạn cũng có thể tạo một đối tượng có thông tin về kiểu dáng và tham chiếu đến nó trong thuộc tính style:
Ví dụ:
Tạo một đối tượng kiểu có tên myStyle :
const Header = () => { const myStyle = { color: "white", backgroundColor: "DodgerBlue", padding: "10px", fontFamily: "Sans-Serif" }; return ( <> <h1 style={myStyle}>Hello Style!</h1> <p>Add a little style!</p> </> ); }Được chứng nhận!
$95 ĐĂNG KÝ
Biểu định kiểu CSS
Bạn có thể viết kiểu CSS của mình trong một tệp riêng biệt, chỉ cần lưu tệp có phần mở rộng tệp .css và nhập tệp đó vào ứng dụng của bạn.
Ứng dụng.css:
Tạo một tệp mới có tên "App.css" và chèn một số mã CSS vào đó:
body { background-color: #282c34; color: white; padding: 40px; font-family: Sans-Serif; text-align: center; }Lưu ý: Bạn có thể gọi file tùy thích, chỉ cần nhớ đúng đuôi file là được.
Nhập biểu định kiểu trong ứng dụng của bạn:
chỉ mục.js:
import React from 'react'; import ReactDOM from 'react-dom/client'; import './App.css'; const Header = () => { return ( <> <h1>Hello Style!</h1> <p>Add a little style!.</p> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Header />);Mô-đun CSS
Một cách khác để thêm kiểu vào ứng dụng của bạn là sử dụng Mô-đun CSS.
Mô-đun CSS thuận tiện cho các thành phần được đặt trong các tệp riêng biệt.
CSS bên trong mô-đun chỉ khả dụng cho thành phần đã nhập nó và bạn không phải lo lắng về xung đột tên.
Tạo mô-đun CSS có phần mở rộng .module.css , ví dụ: my-style.module.css .
Tạo một tệp mới có tên "my-style.module.css" và chèn một số mã CSS vào đó:
my-style.module.css:
.bigblue { color: DodgerBlue; padding: 40px; font-family: Sans-Serif; text-align: center; }Nhập biểu định kiểu trong thành phần của bạn:
Xe.js:
import styles from './my-style.module.css'; const Car = () => { return <h1 className={styles.bigblue}>Hello Car!</h1>; } export default Car;Nhập thành phần trong ứng dụng của bạn:
chỉ mục.js:
import ReactDOM from 'react-dom/client'; import Car from './Car.js'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);