Nhập css làm đối tượng React

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 style 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

:local(.className)-điều này khi bạn sử dụng ứng dụng tạo-phản ứng vì cấu hình gói web

.className-điều này nếu bạn sử dụng bản soạn sẵn phản ứng của riêng mình

Để 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 webpack.config.js của mình

. . .
{
  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 styled-components
• npm install styled-components --save
• 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

Chào mừng độc giả trở lại với một blog khác, nơi tôi cố gắng giải thích một chủ đề kỹ thuật theo cách đơn giản nhất có thể. Blog này sẽ tập trung vào các Mô-đun CSS là gì và cách bạn có thể sử dụng chúng trong ứng dụng React của mình (được khởi động bằng ứng dụng Tạo-Phản ứng)

Mô-đun CSS là gì?

Theo repo chính thức Mô-đun CSS là “tệp CSS trong đó tất 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”. Điều đó có nghĩa là gì? . Tôi nghĩ một ví dụ sẽ giúp giải thích rõ hơn về khái niệm này

mục lục. html

Ở trên, chúng tôi đang áp dụng lớp import './DottedBox.css'3 cho thẻ import './DottedBox.css'4

phong cách. css

Hình ảnh trên cho thấy rằng chúng tôi đang áp dụng một số CSS cho thẻ import './DottedBox.css'4. Những gì tôi vừa chỉ cho bạn là cách bạn thường thêm các kiểu vào các thành phần HTML. Trình duyệt có thể hiểu hai tệp này và áp dụng kiểu CSS mà không gặp bất kỳ sự cố hoặc bước bổ sung nào

Mô-đun CSS có một cách tiếp cận khác. Thay vì viết HTML thuần túy, chúng tôi cần viết tất cả đánh dấu của mình trong tệp JavaScript, trong trường hợp của chúng tôi, tôi sẽ sử dụng tệp import './DottedBox.css'6. Đây là một ví dụ về cách nó có thể trông như thế nào

chủ yếu. js

Trong bước xây dựng của chúng tôi, trình biên dịch sẽ tìm kiếm trong tệp import './DottedBox.css'7 mà chúng tôi đã nhập, sau đó xem qua JavaScript mà chúng tôi đã viết và làm cho lớp import './DottedBox.css'8 có thể truy cập được qua import './DottedBox.css'9. Sau đó, bước xây dựng của chúng tôi sẽ xử lý cả hai thứ này thành các tệp HTML và CSS mới, riêng biệt, với một chuỗi ký tự mới thay thế cả lớp HTML và lớp bộ chọn CSS. Bây giờ HTML và CSS được tạo bởi công cụ xây dựng của chúng tôi có thể trông như thế này

mục lục. html

phong cách. css

Như bạn có thể thấy lớp import './DottedBox.css'3 đã được chuyển đổi trong cả tệp HTML và CSS. Trong bước xây dựng, một lớp mới được tạo động với một mã định danh duy nhất

Bạn có thể thắc mắc, tại sao bạn lại sử dụng Mô-đun CSS? . Theo mặc định, phạm vi CSS là toàn cầu và lý do cho điều này là chúng tôi muốn các kiểu của chúng tôi xếp tầng trong suốt dự án của chúng tôi. Đôi khi đây là những gì bạn muốn, nhưng nếu bạn muốn các kiểu của mình nằm trong phạm vi cục bộ thì các Mô-đun CSS là một trong những giải pháp tốt nhất. Các mã định danh duy nhất được tạo bởi Mô-đun CSS chắc chắn có thể giúp bản địa hóa phạm vi của chúng tôi

Các mô-đun CSS trong ứng dụng React

Có hai cách khác nhau để sử dụng Mô-đun CSS trong ứng dụng React

Khi sử dụng công cụ Tạo-Phản ứng-Ứng dụng, bạn được cung cấp một lệnh tiện dụng style={nameOfvariable}1 cho phép bạn định cấu hình Webpack trong số các tính năng khác theo ý muốn. Đây là một cách để sử dụng Mô-đun CSS trong ứng dụng React. Rõ ràng là có một số bước nữa bạn cần phải hoàn thành sau khi đẩy ra, nhưng tôi sẽ không đi qua chúng ở đây. Nếu bạn quan tâm, tôi khuyên bạn nên đọc blog này trên đó

Thay vào đó, tôi sẽ chọn tùy chọn số hai, đây là cách dễ nhất để sử dụng Mô-đun CSS trong ứng dụng React. Ghi chú. tính năng này chỉ khả dụng với Reac-scripts@2. 0. 0 hoặc cao hơn. Tùy chọn này chỉ yêu cầu bạn đặt tên và nhập các tệp CSS của mình theo cách khác

Không sử dụng Mô-đun CSS

cấu trúc tập tin

Cái nút. js

Sử dụng các mô-đun CSS

cấu trúc tập tin

Như bạn có thể thấy quy ước đặt tên cho tệp là style={nameOfvariable}2. Điều này cho phép React và Webpack biết rằng chúng tôi đang sử dụng Mô-đun CSS

Cái nút. mô-đun. css

Cái nút. js

Tôi đã thực hiện một số thay đổi đối với Nút. js để sử dụng Mô-đun CSS. Ở dòng 3, chúng tôi đang nhập biểu định kiểu mô-đun CSS là import './DottedBox.css'40 , nhưng bạn có thể sử dụng bất kỳ tên nào bạn thích. Tại dòng 6, chúng tôi đang sử dụng các kiểu CSS mà chúng tôi vừa nhập

Bạn có thể có quyền truy cập vào kiểu dáng trong bản nhập import './DottedBox.css'40 (dòng 3) bằng cách tham chiếu nó dưới dạng đối tượng JavaScript. Đó là lý do tại sao chúng tôi sử dụng import './DottedBox.css'42 ở dòng 6

Nếu bạn kiểm tra phần tử này bằng Công cụ dành cho nhà phát triển của Chrome, bạn sẽ thấy nội dung như thế này

Công cụ dành cho nhà phát triển Chrome

Công cụ dành cho nhà phát triển Chrome

Như bạn có thể thấy lớp đã được chuyển đổi và một mã định danh duy nhất cũng được thêm vào

Mô-đun CSS là một cách tiếp cận tuyệt vời để làm cho CSS có phạm vi cục bộ và để ngăn xung đột đặt tên trong các dự án vừa và lớn. Tôi hy vọng bạn có thể hiểu rõ hơn về cách hoạt động của Mô-đun CSS, lợi ích của chúng và cách bạn có thể triển khai chúng vào ứng dụng React của mình

Làm cách nào để cài đặt CSS trong React?

Sử dụng các mô-đun CSS thực sự rất đơn giản. .

Đầu tiên, tạo một tệp CSS bình thường. .

Thêm các lớp CSS vào tệp này. .

Nhập mô-đun bạn vừa tạo từ bên trong thành phần của mình, như thế này. .

Để sử dụng một lớp được xác định trong mô-đun của bạn, chỉ cần coi nó như một thuộc tính bình thường từ đối tượng kiểu, như

Tại sao tôi không thể nhập CSS vào React?

Lỗi này được tạo ra bởi vì trình biên dịch chỉ có thể nhập tệp từ thư mục src . Ở đây file CSS được lưu ngoài thư mục src nên trình biên dịch không import được. Để mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục src.

Làm cách nào để nhập tệp CSS?

Quy tắc @import cho phép bạn nhập một biểu định kiểu vào một biểu định kiểu khác . Quy tắc @import phải ở đầu tài liệu (nhưng sau bất kỳ khai báo @charset nào). Quy tắc @import cũng hỗ trợ truy vấn phương tiện, vì vậy bạn có thể cho phép quá trình nhập phụ thuộc vào phương tiện.

Chúng ta có thể viết CSS trực tiếp vào JSX không?

Tương tự như cách React cho phép chúng ta viết HTML dưới dạng JavaScript bằng JSX, CSS-in-JS đã làm được điều tương tự với CSS. CSS-in-JS cho phép chúng tôi viết các kiểu CSS trực tiếp trong javascript (. js) tệp . Nó không chỉ cho phép bạn viết các quy tắc kiểu CSS mà không cần phải tạo một.