Css không hoạt động trong thành phần phản ứng

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 trực tiếp kiểu dáng 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 webpack

.className-điều này nếu bạn sử dụng bảng 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 biến của chúng tôi làm trình bao bọc import './DottedBox.css'1 loại thành phần phản ứng. )
• 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

Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm

Các mô-đun CSS cung cấp một cách để xác định phạm vi cục bộ các tên lớp CSS. Bạn không phải lo lắng về việc ghi đè các kiểu khi bạn sử dụng cùng một tên lớp

Tìm hiểu cách hoạt động của các mô-đun CSS, lý do bạn nên sử dụng chúng và cách triển khai chúng trong dự án React

Mô-đun CSS là gì?

Tài liệu mô-đun CSS mô tả mô-đun CSS dưới dạng tệp CSS có tên lớp được đặt trong phạm vi cục bộ theo mặc định. Điều này có nghĩa là bạn có thể xử lý các biến CSS có cùng tên trong các tệp CSS khác nhau

Bạn viết các lớp mô-đun CSS giống như các lớp bình thường. Sau đó, trình biên dịch tạo các tên lớp duy nhất trước khi gửi CSS tới trình duyệt

Ví dụ, hãy xem xét những điều sau đây. btn trong một tệp có tên là style. mô-đun. css

 .btn {
    width: 90px;
    height: 40px;
    padding: 10px 20px;
}
 

Để sử dụng tệp này, bạn phải nhập tệp đó vào tệp JavaScript

 import styles from "./styles.module.js"
 

Bây giờ, để tham khảo các. btn và làm cho nó khả dụng trong một phần tử, bạn sẽ sử dụng lớp như bên dưới

 class="styles.btn"
 

Quá trình xây dựng sẽ thay thế lớp CSS bằng một tên duy nhất có định dạng như _styles__btn_118346908

Tính duy nhất của các tên lớp có nghĩa là, ngay cả khi bạn sử dụng cùng một tên lớp cho các thành phần khác nhau, chúng sẽ không xung đột. Bạn có thể đảm bảo tính độc lập mã cao hơn vì bạn có thể lưu trữ các kiểu CSS của một thành phần trong một tệp duy nhất, dành riêng cho thành phần đó

Điều này giúp đơn giản hóa việc gỡ lỗi, đặc biệt nếu bạn đang làm việc với nhiều biểu định kiểu. Bạn sẽ chỉ cần theo dõi mô-đun CSS cho một thành phần cụ thể

Các mô-đun CSS cũng cho phép bạn kết hợp nhiều lớp thông qua từ khóa soạn thảo. Ví dụ, hãy xem xét những điều sau đây. lớp btn ở trên. Bạn có thể “mở rộng” lớp đó trong các lớp khác bằng cách sử dụng các bài soạn

Đối với một nút gửi, bạn có thể có

 .btn {
    /* styles */
}
 
.submit {
    composes: btn;
    background-color: green;
    color:#FFFFFF
}
 

Điều này kết hợp các. btn và. nộp lớp. Bạn cũng có thể soạn các kiểu từ một mô-đun CSS khác như thế này

 .submit {
    composes:primary from "./colors.css"
    background-color: green;
}
 

Lưu ý rằng bạn phải viết quy tắc soạn thư trước các quy tắc khác

Cách sử dụng các mô-đun CSS trong React

Cách bạn sử dụng các mô-đun CSS trong React phụ thuộc vào cách bạn tạo ứng dụng React

Nếu bạn sử dụng ứng dụng tạo phản ứng, các mô-đun CSS sẽ được thiết lập ngay lập tức. Tuy nhiên, nếu bạn định tạo ứng dụng từ đầu, bạn sẽ cần định cấu hình các mô-đun CSS bằng trình biên dịch như webpack

Để làm theo cùng với hướng dẫn này, bạn nên có

• Nút được cài đặt trên máy của bạn
• Hiểu biết cơ bản về các mô-đun ES6
• Hiểu biết cơ bản về React

Tạo ứng dụng phản ứng

Để đơn giản hóa mọi thứ, bạn có thể sử dụng ứng dụng tạo-phản ứng để tạo ra ứng dụng React

Chạy lệnh này để tạo một dự án React mới có tên là mô-đun phản ứng-css

 npx create-react-app react-css-modules
 

Điều này sẽ tạo một tệp mới có tên là mô-đun phản ứng-css với tất cả các phụ thuộc cần thiết để bắt đầu với React

Tạo một thành phần nút

Bạn sẽ tạo một thành phần Nút và một mô-đun CSS có tên là Nút. mô-đun. css trong bước này. Trong thư mục src, tạo một thư mục mới có tên là Thành phần. Trong thư mục đó, tạo một thư mục khác có tên là Nút. Bạn sẽ thêm thành phần Nút và các kiểu của nó trong thư mục này

Điều hướng đến src/Components/Button và tạo Button. js

 export default function Button() {
    return (
        <button>Submitbutton>
    )
}
 

Tiếp theo, tạo một tệp mới có tên là Nút. mô-đun. css và thêm vào như sau

________số 8_______

Để sử dụng lớp này trong thành phần Nút, hãy nhập nó dưới dạng kiểu và tham chiếu nó trong tên lớp của thành phần nút như thế này

 import styles from "./Button.module.css"
 
export default function Button() {
    return (
        <button className={styles.btn}>Submitbutton>
    )
}
 

Đây là một ví dụ đơn giản cho thấy cách sử dụng một lớp duy nhất. Bạn có thể muốn chia sẻ các kiểu trên các thành phần khác nhau hoặc thậm chí kết hợp các lớp. Đối với điều này, bạn có thể sử dụng từ khóa soạn thảo như đã đề cập trước đó trong bài viết này

Sử dụng Thành phần

Đầu tiên, sửa đổi thành phần Nút bằng mã sau

 import styles from "./Button.module.css"
 
export default function Button({type="primary", label="Button"}) {
    return (
        <button className={styles[type]}>{label}button>
    )
}
 

Mã này làm cho thành phần Nút trở nên năng động hơn bằng cách chấp nhận một giá trị loại làm chỗ dựa. Loại này sẽ xác định tên lớp được áp dụng cho phần tử nút. Vì vậy, nếu nút là nút gửi, tên lớp sẽ là “gửi”. Nếu là “lỗi”, tên lớp sẽ là “lỗi”, v.v.

Để sử dụng từ khóa soạn thảo thay vì viết tất cả các kiểu cho từng nút từ đầu, hãy thêm phần sau vào Nút. mô-đun. css

 import styles from "./styles.module.js"
 

0

Trong ví dụ này, lớp chính và lớp phụ sử dụng lớp btn. Bằng cách này, bạn giảm số lượng mã bạn cần viết

Bạn có thể thực hiện điều này hơn nữa với một mô-đun CSS bên ngoài có tên là colors. mô-đun. css, chứa các màu được sử dụng trong ứng dụng. Sau đó, bạn có thể sử dụng mô-đun này trong các mô-đun khác. Ví dụ, tạo màu. mô-đun. css trong thư mục gốc của thư mục Thành phần với đoạn mã sau

 import styles from "./styles.module.js"
 

1

Bây giờ trong Nút/Nút. mô-đun. css, hãy sửa đổi các lớp chính và lớp phụ để sử dụng các lớp trên như thế này

 import styles from "./styles.module.js"
 

2

Sass với các mô-đun CSS

Bạn có thể sử dụng các mô-đun CSS để cải thiện tính mô-đun của cơ sở mã của mình. Ví dụ: bạn có thể tạo một lớp CSS đơn giản cho thành phần nút và sử dụng lại các lớp CSS thông qua thành phần

Để tăng sức mạnh cho việc sử dụng các mô-đun CSS của bạn, hãy sử dụng Sass. Sass—Syntactally Awesome Style Sheets—là một bộ tiền xử lý CSS cung cấp rất nhiều tính năng. Chúng bao gồm hỗ trợ lồng, biến và kế thừa không có sẵn trong CSS. Với Sass, bạn có thể thêm các tính năng phức tạp hơn vào ứng dụng của mình

Tại sao CSS của tôi không hoạt động?

Đang tạo CSS. Điều này có thể dễ dàng được khắc phục bằng cách truy cập WP admin > Elementor > Tools > Regenerate CSS. Sau đó, bạn có thể xóa bộ đệm (bộ đệm WP và bộ đệm của trình duyệt) và làm mới trang . Xóa bộ nhớ cache của trang web. Kiểm tra xem bạn có bất kỳ plugin bộ nhớ đệm nào trên trang web của mình hoặc bất kỳ bộ đệm ẩn cấp máy chủ nào được bật không. Xóa các bộ đệm đó.

Thành phần React kết nối với CSS như thế nào?

Đây là cách chúng được thiết lập. .

Tạo một tệp với. mô-đun. css làm phần mở rộng

Nhập mô-đun đó vào ứng dụng React (như chúng ta đã thấy trước đó)

Thêm một tên lớp vào một phần tử hoặc thành phần và tham chiếu kiểu cụ thể từ các kiểu đã nhập

Một số cách để xử lý CSS với các thành phần React là gì?

Có khoảng 8 cách khác nhau để tạo kiểu cho các thành phần React Js, tên và giải thích của một số cách được đề cập bên dưới. .

CSS nội tuyến

CSS bình thường

CSS trong JS

Thành phần theo kiểu

mô-đun CSS

Sass & SCSS

phong cách