Bạn đã thêm các chức năng vào ứng dụng React của mình. Bây giờ, đã đến lúc thêm giao diện mà ứng dụng React của bạn xứng đáng
Trong phần này, bạn sẽ học cách thêm CSS vào ứng dụng React JS của mình
Hướng dẫn React này là phần 3 của 11 trong loạt bài React cho người mới bắt đầu
- Phần 1 – Hướng dẫn React. Hướng dẫn học React cho người mới bắt đầu năm 2020
- Phần 2 – Làm việc với React Form và Xử lý sự kiện
- Phần 4 – Cách chỉnh sửa các mục Todos
- Phần 5 – Trạng thái phản ứng liên tục trong bộ lưu trữ cục bộ
- Phần 6 – Bắt đầu với React Lifecycle Methods
- Phần 7 – Bắt đầu với React Hook
- Phần 8 – Cách sử dụng SVG Icons trong React
- Phần 9 – Định tuyến với React Router
- Phần 10 – Cách thêm Menu Hamburger trong React
- Phần 11 – Triển khai Ứng dụng React lên Trang GitHub
Mặc dù có một số cách chúng ta có thể đạt được điều đó, nhưng chúng ta sẽ đề cập đến CSS nội tuyến, biểu định kiểu CSS và Mô-đun CSS trong phần này
Một số chiến lược khác bao gồm – CSS-in-JS [e. g các thành phần được tạo kiểu, Cảm xúc, JSS], Sass & SCSS, Ít hơn, Tiện ích-Đầu tiên-CSS [e. g CSS Tailwind]
Hãy đi sâu vào
Bắt đầu với Biểu định kiểu CSS
Điều này khá đơn giản vì bạn nên làm quen với nó khi làm việc với tệp HTML. Vì vậy, hãy bắt đầu bằng cách tạo một tệp mới có tên là
import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
9 trong thư mục render[] {
return [
];
}
0. Bên trong tệp này, thêm các kiểu cơ sở sau* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
Lưu các tập tin
Tiếp theo, nhập nó vào tệp
render[] {
return [
];
}
1import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
Nếu muốn, bạn có thể nhập tệp trong tệp thành phần chính,
render[] {
return [
];
}
2 thay vì render[] {
return [
];
}
1. Lưu các tập tinBạn sẽ thấy các kiểu CSS của mình được hiển thị ở giao diện người dùng
Bây giờ, hãy bắt đầu thêm tên lớp
Hãy nhớ rằng, trong HTML, chúng ta thêm các lớp CSS vào các phần tử bằng cách sử dụng cú pháp
render[] {
return [
];
}
4. Nhưng trong React JSX, chúng tôi sử dụng một cú pháp đặc biệt gọi là render[] {
return [
];
}
5Mở
render[] {
return [
];
}
2 và cập nhật phương thức render[] {
return [
];
}
7 để thêm tên lớprender[] {
return [
];
}
Ghi chú. Chúng tôi đã thêm một trình bao bọc
render[] {
return [
];
}
8 khác vào render[] {
return [
];
}
7Tiếp theo, vào bên trong tệp
render[] {
return [
];
}
40 và cập nhật phần tử render[] {
return [
];
}
41, render[] {
return [
];
}
42 và render[] {
return [
];
}
43 để bao gồm tên lớp. bạn nên córender[] {
return [
];
}
4Sau đó, cập nhật tệp
import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
9 để bao gồm các kiểu sau* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
0Lưu tệp của bạn và kiểm tra giao diện người dùng
Đó là nó. Giản dị
kiểu dáng nội tuyến
Nếu bạn còn nhớ, chúng tôi sử dụng kiểu nội tuyến trong tài liệu HTML bằng cách chuyển một chuỗi gồm tất cả các kiểu tới thuộc tính
render[] {
return [
];
}
45. Nhưng với React JSX, chúng ta sẽ gán một đối tượng JavaScript cho thuộc tínhVào bên trong tệp
render[] {
return [
];
}
46 và cập nhật thành phần tiêu đề để bao gồm thuộc tính render[] {
return [
];
}
45* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
4Lưu tệp và kiểm tra lối vào để xem các thay đổi của bạn
Trong mã, bạn sẽ nhận thấy hai dấu ngoặc nhọn. Chúng ta đã biết rằng các biểu thức JavaScript hợp lệ trong JSX được viết bên trong dấu ngoặc nhọn. Dấu ngoặc nhọn thứ hai dành cho kiểu dáng nội tuyến ở dạng đối tượng JavaScript
Ngoài ra, hãy lưu ý rằng các phím kiểu nằm trong camelCase
Một cách khác để sử dụng kiểu nội tuyến trong React là sử dụng các biến. Vẫn trong tệp
render[] {
return [
];
}
46, hãy thêm đoạn mã sau vào trên câu lệnh render[] {
return [
];
}
49* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
7Sau đó, cập nhật thẻ mở
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
00 để bạn có* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
9Lưu các tập tin. Bây giờ, mã của bạn sẽ trông như thế này
render[] {
return [
];
}
0Kiểm tra giao diện người dùng để xem các thay đổi của bạn hoặc kiểm tra phần tử
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
01 để xem khai báo kiểu CSS của bạn. Trong đoạn mã này, chúng tôi đã tạo một đối tượng, * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
02 với thông tin kiểu dáng và sau đó tham chiếu nó trong thuộc tính render[] {
return [
];
}
45 của thẻ * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
00. Ở đây, chúng tôi đã sử dụng một dấu ngoặc nhọntiếp tục
Tạo kiểu ứng dụng React với các mô-đun CSS
Đôi khi, bạn muốn giới hạn cách tiếp cận biểu định kiểu CSS để giữ các kiểu chung của bạn và sau đó mở rộng phạm vi các kiểu thành phần của bạn cục bộ
Mô-đun CSS cho phép chúng tôi làm điều đó. Nó loại bỏ nguy cơ xung đột tên liên quan đến bộ chọn CSS hoặc một số vấn đề khác liên quan đến kiểu dáng phạm vi toàn cầu
Ví dụ: nếu bạn thêm Mô-đun CSS cho thành phần
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
05, các kiểu được áp dụng sẽ chỉ được áp dụng cho thành phần đó. Bằng cách này, bạn có thể sử dụng cùng tên lớp trong các thành phần khác nhau mà không lo xung đột với bộ chọn CSSHãy xem nó hoạt động như thế nào
Để tạo kiểu cho thành phần
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
05, hãy vào bên trong thư mục * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
07 và tạo một tệp có tên * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
08. Sau đó, thêm các kiểu saurender[] {
return [
];
}
9Sau đó, vào bên trong tệp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
09 và nhập tệp * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
40 như vậyimport React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
0Sau đó, cập nhật đánh dấu trong câu lệnh
render[] {
return [
];
}
49 để bao gồm tên lớpimport React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
1Lưu tệp của bạn và kiểm tra giao diện người dùng
Vậy chúng ta đã làm gì?
Đầu tiên, chúng tôi yêu cầu React xử lý tệp CSS dưới dạng mô-đun CSS bằng cách thêm vào tệp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
42. Mô-đun này sau đó được nhập vào tệp * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
09 và được khai báo dưới dạng một đối tượng JavaScript có tên là * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
44Đối tượng này chứa tất cả bộ chọn lớp trong tệp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
40 và chúng tôi đã tham chiếu chúng trong thuộc tính className của JSX với * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
46 [ví dụ: * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
47]Xin lưu ý
Bạn có thể đặt tên cho đối tượng
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
44 bất cứ điều gì bạn muốn. Ngoài ra, hãy lưu ý cách bạn đặt tên cho một lớp có nhiều hơn một từ [e. g * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
49]. Đối với điều này, bạn nên sử dụng camelCase [tôi. e * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
70]. Nhưng nếu bạn muốn có dấu gạch nối trong bộ chọn lớp của mình, thì bạn nên sử dụng ký hiệu ngoặc [ví dụ: * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
71] để tham chiếu bộ chọn bên trong tệp * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
72Bây giờ, nếu bạn kiểm tra danh sách việc cần làm trong các công cụ dành cho nhà phát triển trình duyệt của mình, bạn sẽ thấy rằng mô-đun CSS tạo ra các tên lớp duy nhất. Với điều này, bạn không phải lo lắng về xung đột tên bộ chọn
Đối với những người trong chúng ta, những người muốn sử dụng Sass để biên dịch tệp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
73 thành CSS thông thường. Tất cả những gì bạn phải làm là cài đặt * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
74 như vậyimport React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
2Đó là tất cả
Nếu thích, bạn có thể sử dụng Mô-đun CSS với Sass. Chỉ cần thay đổi phần mở rộng tệp
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
40 thành * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
73. Và cập nhật phần nhập trong tệp * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
09 để phản ánh phần mở rộngThêm Kiểu khi bất kỳ mục công việc nào được hoàn thành
Ở đây, chúng tôi sẽ thêm một
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
78 vào một nhiệm vụ đã hoàn thành trong danh sách việc cần làm. Điều này nên được thẳng về phía trước. Trong thành phần * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
05, thêm các kiểu sau vào phương thức render[] {
return [
];
}
7 nhưng phía trên câu lệnh render[] {
return [
];
}
49import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
3Sau đó, cập nhật câu lệnh
render[] {
return [
];
}
49 để bạn cóimport React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
4Trong mã, chúng tôi đã giới thiệu một thẻ mới,
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
93 và sau đó thêm thuộc tính render[] {
return [
];
}
45 vào thẻ đó. Chúng tôi cũng đã sử dụng toán tử bậc ba trong thuộc tính render[] {
return [
];
}
45 để tự động thay đổi kiểu CSS nếu bất kỳ [các] mục việc cần làm nào được hoàn thànhNhư một bồi dưỡng,
Toán tử bậc ba [hoặc câu lệnh if nội tuyến] như được sử dụng ở đây sẽ kiểm tra xem có mục nào trong danh sách việc cần làm đã được hoàn thành hay chưa
Đây là cách nó hoạt động
5import React from "react" import ReactDOM from "react-dom" //component file import TodoContainer from "./components/TodoContainer" //stylesheet import "./App.css" ReactDOM.render[ , document.getElementById["root"] ]
i. e nếu điều kiện là
96 [trong trường hợp của chúng tôi, nếu nhiệm vụ được đánh dấu hoàn thành], chúng tôi áp dụng câu lệnh thứ hai,* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Segoe UI", Arial, sans-serif; line-height: 1.4; color: #444; background: #fff; height: 100vh; }
97 [chúng tôi đã tạo biến này làm đối tượng chứa thông tin kiểu dáng trong cùng một thành phần], nếu không, chúng tôi áp dụng null [ . không có phong cách]* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Segoe UI", Arial, sans-serif; line-height: 1.4; color: #444; background: #fff; height: 100vh; }
Vâng. Lưu tệp và kiểm tra lối vào
đó là nó. Nhưng trước khi chúng ta chuyển sang phần tiếp theo, hãy đơn giản là tối ưu hóa mã của chúng ta
Sử dụng hủy diệt
Nếu bạn nhìn vào thành phần ________ 205, chúng tôi đã viết bội số của ________ 299 để lấy các giá trị
render[] {
return [
];
}
00, render[] {
return [
];
}
01 và render[] {
return [
];
}
02. Điều này có thể gây khó khăn nếu ứng dụng của bạn trở nên phức tạpThay vì làm những điều này, bạn có thể kéo từng biến ra khỏi
render[] {
return [
];
}
03. Nói cách khác, bạn có thể "hủy cấu trúc" render[] {
return [
];
}
03 và lấy các biến này từ nóĐể hủy cấu trúc của
render[] {
return [
];
}
00 từ render[] {
return [
];
}
06, bạn sẽ có một cái gì đó như thế nàyimport React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
6Điều tương tự cũng áp dụng cho
render[] {
return [
];
}
01 và render[] {
return [
];
}
02Hãy áp dụng điều này trong thành phần
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
05. Thêm dòng mã này ngay phía trên câu lệnh render[] {
return [
];
}
49import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"
//stylesheet
import "./App.css"
ReactDOM.render[
,
document.getElementById["root"]
]
7Sau đó, thay thế mọi
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
line-height: 1.4;
color: #444;
background: #fff;
height: 100vh;
}
99 bằng các biến tương ứng của chúng. Chẳng hạn, render[] {
return [
];
}
92 nên được thay thế bằng render[] {
return [
];
}
02, v.v. Tuyên bố render[] {
return [
];
}
49 của bạn sẽ trông như thế này