Đang tải css phản ứng

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

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" 
    }]    
}};

Hã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ộc

Nế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 = {
  module: {
    loaders: [{ 
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
    }]    
}};

9 bộ tải

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ư css

import './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" 
    }]    
}};

Đã đế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ác

6. 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" 
    }]    
}};

Vì 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" 
    }]    
}};

Vì 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" 
    }]    
}};

Mộ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ần

module.exports = {
  module: {
    loaders: [{ 
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
    }]    
}};

9. 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" 
    }]    
}};

Kiể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" 
    }]    
}};

Nế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

programming css

Đang tải css phản ứng

Sass / Scss

Ít hơn

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội