Có bốn tùy chọn khác nhau để tạo kiểu cho các thành phần React. Tất cả phụ thuộc vào sở thích cá nhân của bạn và độ phức tạp cụ thể của ứng dụng của bạn
Nếu bạn chỉ muốn thêm một vài thuộc tính kiểu, thì kiểu nội tuyến là tùy chọn tốt nhất
Khi bạn muốn sử dụng lại các thuộc tính kiểu của mình trong cùng một tệp thì thành phần kiểu là hoàn hảo
Khi ứng dụng của bạn phức tạp hơn, tôi khuyên dùng Mô-đun CSS hoặc biểu định kiểu CSS thông thường
1. Biểu định kiểu CSS
- Chỉ cần nhập tệp css
import './DottedBox.css'để bạn có thể có tệp css riêng cho từng thành phần
2. kiểu dáng nội tuyến
Trong React, kiểu nội tuyến không được chỉ định dưới dạng chuỗi. Thay vào đó, chúng được chỉ định với một đối tượng có khóa là phiên bản camelCased của tên kiểu và giá trị của nó là giá trị của kiểu, thường là một chuỗi
- Chúng ta có thể tạo một biến lưu trữ các thuộc tính kiểu và sau đó chuyển nó đến phần tử như
style={nameOfvariable} - Chúng ta cũng có thể truyền kiểu dáng trực tiếp
style={{color: 'pink'}}
3. 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. Bài viết tuyệt vời về các mô-đun css
- Tương tự với css, chúng tôi nhập tệp css
import styles './DashedBox.css' - sau đó chúng tôi truy cập vào className khi chúng tôi truy cập vào đối tượng
import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid red;
color:red;
`
//display the HTML
render[
Button
];
import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid red;
color:red;
`
//display the HTML
render[
Button
];
Để làm cho các mô-đun CSS hoạt động với Webpack, bạn chỉ cần thêm các mô-đun được đề cập ở trên và thêm trình tải sau vào tệp
import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid red;
color:red;
`
//display the HTML
render[
Button
];
. . .
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .4. Thành phần được tạo kiểu 💅
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
- Đầu tiên chúng ta cần cài đặt thư viện
3import styled from 'styled-components' // Create a button variable and add CSS const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid red; color:red; ` //display the HTML render[ Button ];
4import styled from 'styled-components' // Create a button variable and add CSS const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid red; color:red; ` //display the HTML render[ Button ];- Bây giờ chúng ta có thể tạo một biến bằng cách chọn một phần tử html cụ thể nơi chúng ta lưu trữ các khóa kiểu của mình
import './DottedBox.css'0 - Sau đó, chúng tôi sử dụng tên của biến của chúng tôi như một loại thành phần phản ứng bao bọc
import './DottedBox.css'1. ] - Mẹo sử dụng phím tắt biểu tượng biểu tượng cảm xúc
import './DottedBox.css'2 💡
Tất cả những cách tạo kiểu cho các thành phần phản ứng này đều có ưu và nhược điểm
Tất cả tập trung vào cả sở thích cá nhân của riêng bạn và độ phức tạp cụ thể của ứng dụng của bạn
Tôi đề nghị bạn thực hiện 4 dự án, mỗi dự án sử dụng phong cách khác nhau
Thưởng thức 😃
Hướng dẫn tiếp theo Vòng đời thành phần
✉️ Đăng ký Email Blast mỗi tuần một lần của Codeburst, 🐦 Theo dõi Codeburst trên Twitter và 🕸️ Tìm hiểu về Phát triển Web Full Stack
“CSS-in-JS” đề cập đến một mẫu trong đó CSS được tạo bằng JavaScript thay vì được xác định trong các tệp bên ngoài
Lưu ý rằng chức năng này không phải là một phần của React, nhưng được cung cấp bởi các thư viện của bên thứ ba. React không có ý kiến về cách định nghĩa các kiểu;
Tôi có thể tạo hoạt ảnh trong React không?
React có thể được sử dụng để tăng sức mạnh cho hoạt ảnh. Xem React Transition Group, React Motion, React Spring hoặc Framer Motion chẳng hạn
Theo tôi, có lẽ mạnh mẽ và hữu ích nhất là Styled Components. Thành phần được tạo kiểu cho phép bạn viết CSS thực trong JavaScript của mình. Ưu điểm chính là bạn có thể thêm mã điều kiện và sử dụng các biến và hàm trong CSS
Bạn có thể cài đặt Styled Components bằng lệnh sau
9import styled from 'styled-components' // Create a button variable and add CSS const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid red; color:red; ` //display the HTML render[ Button ];Tiếp theo, bạn cần nhập nó vào thành phần của mình. Sau đó, bạn có thể tạo một biến mới chứa CSS. Tên biến giống nhau với dấu ngoặc mở và đóng sẽ hiển thị hoặc tạo một phần tử HTML với các kiểu đã thêm trước đó trên đó
import styled from 'styled-components' // Create a button variable and add CSS const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid red; color:red; ` //display the HTML render[ Button ];Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Ngoài những cách này, có 3 cách hữu ích hơn mà bạn có thể thêm CSS [tín dụng cho lukeshiru]4 - Mô-đun CSS
Bạn cũng có thể thêm các kiểu có phạm vi khá dễ dàng, bạn chỉ cần tạo một tệp có phần mở rộng. mô-đun. css, như thế này
// ComponentName.module.css .Red { color: #f00; } .Blue { color: #00f; }Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó, bạn nhập nó như thế này
import styles from "./ComponentName.module.css";Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
và sử dụng nó như thế này
This text will be red This text will be blueVào chế độ toàn màn hình Thoát chế độ toàn màn hình
5 - CSS nguyên tử
Một trong những khung CSS nguyên tử phổ biến nhất hiện có là Tailwind, chỉ cần biến nó thành một phần trong dự án của bạn theo hướng dẫn của họ, bạn có thể chỉ cần sử dụng tên lớp mà không cần chạm vào CSS
Blue buttonVào chế độ toàn màn hình Thoát chế độ toàn màn hình
6 - Cảm xúc
Styled-components không phải là thư viện duy nhất cho phép bạn tạo các thành phần với các kiểu được nhúng vào chúng, bạn có các lựa chọn thay thế tuyệt vời như Emotion. Điều tốt nhất về Emotion là nó không phụ thuộc vào khung, vì vậy bạn có thể mang kiến thức của mình đến các thư viện và khung khác ngoài React, trong khi khá giống với các thành phần theo kiểu [vì vậy, trong một số trường hợp, bạn có thể chỉ cần thay đổi phần nhập]
Và bạn có nó rồi đấy. Tôi chắc chắn rằng còn nhiều tùy chọn khác nhưng tôi nghĩ các tùy chọn này đánh dấu vào hầu hết các ô cần thiết khi thêm CSS vào ứng dụng của bạn
CSS được áp dụng như thế nào trong React?
Sử dụng mô-đun CSS .Tạo một tập tin với. mô-đun. css làm phần mở rộngNhập mô-đun đó vào ứng dụng React [như chúng ta đã thấy trước đó]Thêm một tên lớp vào một phần tử hoặc thành phần và tham chiếu kiểu cụ thể từ các kiểu đã nhậpCó bao nhiêu cách chúng ta có thể định kiểu thành phần React?
Có khoảng tám cách khác nhau để tạo kiểu cho các thành phần React Js, tên và giải thích của một số cách được đề cập bên dưới.Làm cách nào để cài đặt CSS trong React JS?
Để nhập Mô-đun CSS vào thành phần tương ứng, hãy nhập biểu định kiểu của mô-đun css dưới dạng kiểu hoặc [name]Kiểu . Trong JSX, hãy sử dụng lớp CSS được xác định làm chỗ dựa className như vậy. Từ đây, bạn có thể thêm bao nhiêu mô-đun CSS khác mà bạn muốn, chỉ cần nhớ nhập từng mô-đun dưới dạng một tên khác.