Này các cậu. Hôm nay tôi muốn nói với bạn về css trong ứng dụng React. Vì vậy, phong cách rất quan trọng trong web. Không có trang web nào trông đẹp nếu không có css
Nhiều nhà phát triển và công ty không chú ý đầy đủ đến phong cách. Tất nhiên, nếu bạn là nhà phát triển javascript [phản ứng], bạn muốn tạo nhiều logic javascript hơn và dành ít thời gian hơn cho các kiểu. Hoặc nhóm của bạn có những người đặc biệt tạo phong cách. Tuy nhiên cách này có thể gây nguy hiểm cho bạn. Tôi đã đi hết con đường này và tôi đã ngừng viết các kiểu từ hai năm trước. Vì vậy, bây giờ tôi chỉ tập trung vào javascript và phản ứng. Nhưng, đã đến lúc nghĩ về css trong phản ứng. Tôi hy vọng chủ đề này có thể hữu ích cho nhiều nhà phát triển
Tôi đã chọn 9 cách phổ biến để triển khai css trong phản ứng
- CSS tiêu chuẩn
- CSS nội tuyến
- Mô-đun CSS
- Bộ tiền xử lý SASS, ít hơn, kiểu, v.v.
- Thành phần theo kiểu
- Aphrodite
- Đường bán kính
- JSS
- Cảm xúc
Tôi đã tạo kiểu cho một thành phần với mỗi phương thức. Nó có một trình bao bọc, một tiêu đề và một nút. 👇👇👇
……………………………. ………………………. 👇
Bạn có thể tìm thấy tất cả mã nguồn trong GitHub của tôi, bấm vào đây. 👈
……………………………. ………………………👆
1. CSS tiêu chuẩn
Bạn sẽ cần cài đặt css-loader và style-loader nếu bạn sử dụng bản dựng webpack tùy chỉnh
npm install css-loader, style-loader --save-dev
Bước tiếp theo là thêm bộ tải vào cấu hình webpack
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
Sau khi viết tệp css tiêu chuẩn và nhập tệp đó vào tệp phản ứng
import "styles.css";
Nó là đủ để các phong cách làm việc
Hãy xem cách trình tải webpack hoạt động, cách chúng lấy css của bạn và thêm nó vào thẻ html đầu với kiểu thẻ được bao bọc
body {
background: red;
}
Nếu bạn sử dụng ứng dụng tạo phản ứng, css sẽ hoạt động tốt mà không cần trình tải
2. CSS nội tuyến
Css nội tuyến không phải là cách tốt nhất để triển khai css trong ứng dụng. Nhưng đôi khi, nó hữu ích. Cách này tương tự như cách sử dụng style cũ trong tài liệu HTML. Trong phản ứng js, kiểu dáng nội tuyến hơi khác một chút. Có hai cách bạn có thể thực hiện nó
- Truyền các thuộc tính Biểu định kiểu trong thành phần [thành phần. Chức vụ]
- Định nghĩa các khối Stylesheet cũng tương tự như các lớp trong css [các thành phần. Trình bao bọc, Nút👇]
Hãy cẩn thận với các kiểu nội tuyến
3. Mô-đun CSS
Mô-đun CSS là một cách tiếp cận khác để đưa CSS vào Ứng dụng React. Các mô-đun CSS biến CSS thành phạm vi cục bộ, điều đó có nghĩa là CSS nằm trong phạm vi thành phần cụ thể đó và tệp
Các mô-đun CSS tự động tạo các kiểu cho một thành phần cụ thể. Đây là một ví dụ về CSS được tạo bởi
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
7Hãy chú ý đến tên tệp css
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
8 - điều này là bắt buộcNếu bạn tạo tên tệp không có quy tắc này thì kiểu của bạn sẽ không hoạt động. Tệp css trông giống như một css thông thường, không có phép thuật 🧙♂️
Thành phần CSS là công cụ hữu ích cho các thành phần bị cô lập
4. Bộ tiền xử lý SASS/LESS
Bộ tiền xử lý là công cụ mạnh mẽ nếu bạn biết cách sử dụng nó. Tôi là người ủng hộ sass. Các nhà phát triển đằng sau 'sass' mô tả nó là. “Sass là ngôn ngữ mở rộng CSS chuyên nghiệp hoàn thiện, ổn định và mạnh mẽ nhất trên thế giới. ” — Vì vậy, hãy xem cách tích hợp sass trong phản ứng
Sass / Scss
- Cài đặt
module.exports = {
9 bộ tải
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
npm install style-loader css-loader sass-loader --save-dev
2. Tạo quy tắc trong cấu hình s webpack
________số 8_______Đây là cấu hình webpack cơ sở cho sass. Tôi lấy nó từ tài liệu chính thức. Bạn có thể xem tại đây
Bạn có thể sử dụng các tệp
import "styles.css";
0 trong ứng dụng của mình sau khi sửa đổi cấu hình. Tệp sass nhập hoạt động tốt như cssimport './style.scss';
Ngoài ra, nhiều nhà phát triển thích sử dụng ít tiền xử lý hơn. Bạn có thể xem cách tích hợp
import "styles.css";
1 trong phản ứng bên dưới. 👇Ít hơn
- Cài đặt bộ tải npm
$ npm install style-loader css-loader less-loader --save-dev
2. Tạo quy tắc trong cấu hình webpack
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
},
],
},
],
},
};
Đây là cấu hình webpack cơ bản với giá rẻ hơn. Nếu bạn muốn tìm hiểu thêm bấm vào đây. Như bạn thấy, các bước tích hợp tiền xử lý trong ứng dụng ReactJs là tương tự nhau. Ngoài ra, việc nhập trong ứng dụng hoạt động như css và sass
Nếu bạn muốn sử dụng bút stylus hoặc postCss, bạn sẽ cố gắng tích hợp chúng vào các liên kết bên dưới 👇
- bút cảm ứng
- BàiCss
Chúng tôi đã xem xét các cách phổ biến để tạo kiểu trong phản ứng với css và bộ tiền xử lý
Phần tiếp theo của bài viết này là về css trong js
👨💻 Vì vậy, hãy bắt đầu
CSS trong JS
CSS trong JavaScript cung cấp một sân chơi mới cho biểu định kiểu. Khi chúng ta nói về CSS, bạn có thể bắt đầu nghĩ về bộ chọn cơ sở thẻ, bộ chọn lớp hoặc bộ chọn id
Nhưng với sự trợ giúp của CSS-in-JS, bạn có thể có mọi khả năng để cấu trúc và suy nghĩ ở cấp độ thành phần thay vì tài liệu. Bạn không cần duy trì nhiều tệp CSS hơn, thay vào đó, bạn có thể tạo kiểu CSS bằng Javascript. Bạn có tất cả sức mạnh javascript để làm việc với CSS. Có rất nhiều thư viện CSS-in-JS mà bạn có thể sử dụng trong dự án của mình. Chúng ta sắp thảo luận về một số trong số chúng, hãy bắt đầu nào 👇
5. Thành phần theo kiểu
Styled Components là một trong những thư viện CSS-in-JS phổ biến nhất được giới thiệu tại Github. Nó có hơn 23 nghìn sao trên GitHub
Styled-components là một thư viện mạnh mẽ. Nó có rất nhiều tính năng, ví dụ. “CSS hiện có, đạo cụ đã qua, Ảnh động, Kết xuất phía máy chủ, Mẫu phương tiện, Bảo mật, Chủ đề” và hỗ trợ cho React Native, TypeScript và những thứ khác. Bạn có thể tìm thấy tài liệu của họ ở đây
Để sử dụng thư viện này trong một dự án, bạn nên cài đặt nó. Nhập một lệnh như được chỉ ra bên dưới. 👇
npm install --save styled-components
Để sử dụng mã này để nhập thành phần kiểu vào Tệp JS của bạn như được hiển thị bên dưới👇
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
0Đã đến lúc kiểm tra xem nó trông như thế nào 🔍
Như bạn có thể thấy, chúng tôi đã tạo các thành phần dựa trên các kiểu từ gói
import "styles.css";
2 npm. Bạn có thể sử dụng import "styles.css";
3 với phương pháp import "styles.css";
4 hoặc các thẻ html khác6. Aphrodite
Thêm một CSS trong thư viện JS với 4,7K+ ⭐️ đã có trên GitHub. Theo các nhà phát triển Aphrodite, đây là một trong những thư viện phù hợp nhất cho React JS. Nó hỗ trợ mã giả cũng như các truy vấn phương tiện cần thiết trong thiết kế đáp ứng. Nó thêm CSS vào thời điểm kết xuất các thành phần bên trong DOM theo các nhà phát triển
Làm thế nào để cài đặt Aphrodite?
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
1Vì vậy, hãy kiểm tra xem nó hoạt động như thế nào 👀
Cách này tương tự với styled-components và inline style
7. Đường bán kính
Thư viện CSS-in-JS này tập trung vào tạo kiểu nội tuyến và loại bỏ mã chết sẽ hữu ích. Radium là một thư viện rất phổ biến với hơn 6. 9K ⭐️ trên GitHub
Nó có hỗ trợ cho
- kiểu nội tuyến
- Bộ chọn giả
import "styles.css";
5 - Truy vấn phương tiện truyền thông
- tiền tố nhà cung cấp
- hoạt hình
- lớp ES6
- tạoClass
Đây là một hướng dẫn ngắn về cách sử dụng nó trong Ứng dụng React
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
2Vì vậy, hãy để tôi chỉ ra một ví dụ rõ ràng
🚨 Xin lưu ý việc tạo thành phần và bọc nó bằng chức năng Radium
8. JSS [phản ứng-jss]
JSS là một thư viện nữa với hơn 5 nghìn sao trên GitHub. Có một số lý do để sử dụng thư viện JSS
Tại sao bạn nên sử dụng thư viện JSS thay vì thư viện khác?
- tuyên bố
- Không có xung đột và có thể tái sử dụng
- JSS có thể biên dịch trong trình duyệt
- Nó cũng hỗ trợ kết xuất phía máy chủ vì nó có cơ hội biên dịch khi xây dựng trong Node
- JSS không chỉ là một thư viện CSS-in-JS. Bạn có thể sử dụng nó làm định dạng đơn giản nhất cũng như các Thư viện CSS-in-JS khác như styled-component
- Bạn có thể sử dụng bộ tiền xử lý với các thư viện JSS như SASS, LESS, v.v.
- tính mô đun
- Loại bỏ mã chết
Cài đặt gói này như trong các ví dụ được mô tả ở trên
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
3Một ví dụ
Như bạn thấy, chúng ta có
import "styles.css";
6 với các kiểu và một thành phần chức năng. Sau khi nhập import "styles.css";
7 và gọi nó bằng các kiểu và thành phầnmodule.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
49. Cảm xúc
Thư viện CSS này tập trung vào hiệu suất ứng dụng. Với hơn 7. 7K ⭐️ trên GitHub, đây là một trong những thư viện CSS-in-JS phổ biến nhất. Emotion cung cấp một bố cục phong cách mạnh mẽ và có thể dự đoán được bên cạnh trải nghiệm tuyệt vời dành cho nhà phát triển với các tính năng như bản đồ nguồn, nhãn và các tiện ích thử nghiệm. Cả hai kiểu chuỗi và đối tượng đều được hỗ trợ
Hãy thiết lập nhanh
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
5Kiểm tra ví dụ dưới đây để hiểu cách sử dụng cảm xúc
Emotion có cú pháp tương tự like một styled-components
Hãy chú ý đến nhận xét trên đầu dòng tệp
module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}};
6Nếu bạn không sử dụng dòng này, "Cảm xúc" sẽ không hoạt động
🏁 Kết luận
Hôm nay chúng ta đã khám phá 9 cách thêm style trong ứng dụng ReactJs. Bạn có thể tìm thấy tất cả mã nguồn trong GitHub của tôi. Nĩa và thưởng thức. Tôi sẽ rất vui nếu bạn theo dõi tôi và cho sao ⭐️ ❤️
Tôi muốn nhấn mạnh, mỗi phương pháp này đều có đối tượng riêng. Nếu bạn quyết định sử dụng một trong những cách, đừng bỏ qua những cách khác. Tạo kiến trúc phù hợp bạn có thể sử dụng bất kỳ cách nào, ngoại trừ kiểu nội tuyến 😄
Tôi thích sử dụng thành phần theo kiểu hơn, nhưng tôi cũng sử dụng sass cho các kiểu với phương pháp BEM. Bạn có thể đánh dấu hai tên lớp lib và tên lớp bem này cho tác vụ này
Tôi thực sự hy vọng rằng bài viết sẽ hữu ích cho bạn. Hãy cho tôi biết trong các nhận xét, nếu bạn quyết định xử lý các lib mới cho các kiểu