Trong ảnh này, chúng ta sẽ tìm hiểu những cách tốt nhất để thêm mã CSS vào React JS hoặc vào ứng dụng React. CSS rất quan trọng trong việc làm cho ứng dụng của bạn trở nên thân thiện với người dùng và hấp dẫn về mặt hình ảnh. Dưới đây là các cách khác nhau để thêm CSS vào ứng dụng React
biểu định kiểu bên ngoài
Bạn có thể tạo một tệp CSS mới trong thư mục dự án của mình và thêm CSS của bạn vào bên trong nó. Sau đó, bạn có thể nhập tệp vào trang thành phần, lớp hoặc React JS của mình
Bạn có thể sử dụng mã bên dưới để nhập biểu định kiểu CSS bên ngoài
import "./styles.css";CSS nội tuyến
CSS nội tuyến có lẽ là phương pháp phổ biến nhất và nhanh nhất trong ba phương pháp để thêm CSS vào ứng dụng React. Tuy nhiên, nó có nhiều nhược điểm và thường không được khuyến khích sử dụng trừ khi bạn có một ứng dụng rất nhỏ
Chúng tôi tạo một đối tượng chứa các tham chiếu khác nhau, sau đó chúng tôi gọi đối tượng này bằng thuộc tính style{}
Ví dụ CSS được thêm vào như hình bên dưới
const styles = { section: { fontSize: "18px", color: "#292b2c", backgroundColor: "#fff", padding: "0 20px" }, wrapper: { textAlign: "center", margin: "0 auto", marginTop: "50px" } }CSS sau đó được thêm vào một phần tử như vậy
các thành phần được tạo kiểu
Các 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
const styles = { section: { fontSize: "18px", color: "#292b2c", backgroundColor: "#fff", padding: "0 20px" }, wrapper: { textAlign: "center", margin: "0 auto", marginTop: "50px" } } 0
Tiếp theo, bạn cần nhập styled-components trong 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 phần tử HTML với các kiểu đã thêm trước đó
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
);mô-đun CSS
Bạn cũng có thể dễ dàng thêm các kiểu có phạm vi, vì bạn chỉ cần tạo một tệp có phần mở rộng là const styles = { section: { fontSize: "18px", color: "#292b2c", backgroundColor: "#fff", padding: "0 20px" }, wrapper: { textAlign: "center", margin: "0 auto", marginTop: "50px" } } 2, như hình bên dưới
// ComponentName.module.css .Red { color: #f00; } .Blue { color: #00f; }Sau đó, bạn nhập các kiểu như sau
import styles from "./ComponentName.module.css";Bây giờ bạn có thể sử dụng các kiểu như hình bên dưới
________số 8_______CSS nguyên tử
Một trong những khung CSS nguyên tử phổ biến nhất hiện có là Tailwind. Nếu bạn đưa Tailwind vào dự án của mình bằng cách làm theo hướng dẫn chính thức, thì bạn có thể sử dụng const styles = { section: { fontSize: "18px", color: "#292b2c", backgroundColor: "#fff", padding: "0 20px" }, wrapper: { textAlign: "center", margin: "0 auto", marginTop: "50px" } } 3 mà không cần chạm vào CSS
Blue buttonCảm xúc
Các thành phần được tạo kiểu không phải là thư viện duy nhất cho phép bạn tạo các thành phần có kiểu nhúng. Một thay thế là Cảm xúc. Điều tuyệt vời nhất về Emotion là framework của nó là bất khả tri, vì vậy bạn có thể mang kiến thức của mình đến các thư viện và framework khác ngoài React, trong khi khá giống với styled-components, vì vậy bạn có thể thay đổi cách nhập trong một số tình huống)
Trong ảnh này, chúng tôi đã xem xét các tùy chọn sẽ đá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
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
npm install --save styled-components
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( <div> <Button>Button</Button> </div> );
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
<span className={styles.Red}>This text will be red</span> <span className={styles.Blue}>This text will be blue</span>
Và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, bằng cách 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
<button className="font-bold bg-blue-600 px-6 py-3 text-white rounded-md">Blue button</button>
Và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 tuyệt vời 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ố tình huống, 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