Tạo kiểu React bằng CSS
Có nhiều cách để tạo kiểu React với CSS, hướng dẫn này sẽ xem xét kỹ hơn ba cách phổ biến:
- Kiểu nội tuyến
- CSS stylesheet
- Mô-đun CSS
Tạo kiểu nội tuyến
Để tạo kiểu cho một phần tử có thuộc tính kiểu nội tuyến, giá trị phải là một đối tượng JavaScript:
Thí dụ:
Chèn một đối tượng với thông tin kiểu:
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, kiểu dáng trong ví dụ trên được viết bên trong hai bộ dấu ngoặc nhọn {{}}.
CamelCased Property Name
Vì CSS nội tuyến được viết bằng một đối tượng JavaScript nên các thuộc tính có dấu gạch nối, chẳng hạn như background-color, phải được viết với cú pháp chữ hoa chữ thường lạc đà:
Thí dụ:
Sử dụng backgroundColorthay 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 với thông tin kiểu và tham chiếu đến nó trong thuộc tính style:
Thí 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 GHI DANH
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 với
.cssphần mở rộng tệp và nhập nó vào ứng dụng của bạn.
App.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 tệp bất cứ điều gì bạn thích, chỉ cần nhớ đúng phần mở rộng của tệp.
Nhập biểu định kiểu vào ứng dụng của bạn:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
const Header = () => {
return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
ReactDOM.render(<Header />, document.getElementById('root'));
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ỉ có sẵn 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 với phần mở rộng, ví dụ .module.css
:.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 vào thành phần của bạn:
Car.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:
index.js:
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));