Không tìm thấy mô-đun không thể giải quyết kiểu css toàn cầu

Trong React js, nơi các lớp hoạt động tương tự như các biến cục bộ trong JavaScript, Mô-đun CSS chỉ là một. tập tin css. Nó làm giảm phạm vi toàn cầu của phong cách React. Ngoài ra, nó là một công cụ ngăn chặn phạm vi toàn cầu và xung đột bằng cách tạo một chuỗi ngẫu nhiên dưới dạng tên className và thêm một hàm băm duy nhất để làm cho mỗi className trở nên độc nhất. Chúng ta có thể ngăn xung đột không gian tên cho các lớp CSS bằng cách sử dụng Mô-đun CSS. Chỉ cần nhập tệp Mô-đun CSS vào thành phần của bạn sẽ cho phép bạn sử dụng cùng một lớp CSS trên nhiều tệp CSS khác nhau

Bất kỳ tệp CSS nào cũng có thể được cập nhật một cách an toàn mà không phải lo lắng rằng nó sẽ ảnh hưởng đến các trang khác vì nó chỉ có phạm vi cục bộ và chỉ có thể ảnh hưởng đến các thành phần khác đang sử dụng tệp mô-đun CSS đã thay đổi. Khi được trình bày trong trình duyệt bằng Mô-đun CSS, nó sẽ tạo các lớp CSS ngẫu nhiên chỉ hiển thị khi trang được kiểm tra kỹ lưỡng

Toàn bộ mục đích của bài viết này là để chứng minh rằng CSS-in-JS và Thành phần được tạo kiểu không phải là điều bắt buộc khi sử dụng React và React cũng có thể được sử dụng với các Mô-đun CSS mà không gặp bất kỳ sự cố nào

Ưu và nhược điểm của các mô-đun CSS

Mô-đun CSS có một số ưu điểm

  • Bằng cách sử dụng Mô-đun CSS, tránh xung đột không gian tên cho các lớp CSS. Nhiều tệp CSS có thể chứa cùng một lớp CSS. Ngoại trừ phong cách toàn cầu, mọi thứ dường như khá phong cách
  • Trong Mô-đun CSS, bạn có thể gửi các lớp tới nhiều thành phần
  • Một trong những lợi ích chính của việc sử dụng Mô-đun CSS là bạn có thể yên tâm chỉnh sửa bất kỳ tệp CSS nào mà không cần lo lắng về việc nó sẽ ảnh hưởng đến các trang web khác như thế nào
  • Tạo các tệp CSS di động và có thể tái sử dụng với Mô-đun CSS. Không còn phải lo lắng về các quy tắc ảnh hưởng đến kiểu của các thành phần khác hoặc xung đột tên bộ chọn
  • Bất chấp sự phức tạp của dự án, các Mô-đun CSS làm cho mã của bạn trông gọn gàng hơn để các nhà phát triển khác có thể đọc và hiểu nó

Cũng có một số khuyết điểm

  • Các kiểu phải được bao gồm dưới dạng một đối tượng có ký hiệu dấu chấm hoặc dấu ngoặc khi tích hợp vào dự án
  • Trái ngược với Thành phần được tạo kiểu, Mô-đun CSS không chấp nhận đạo cụ
  • Trong thời buổi làm việc với global scope, CSS Modules sẽ là một lựa chọn sai lầm

Vậy, tại sao chúng ta nên sử dụng Mô-đun CSS?

  • Khi sử dụng Mô-đun CSS, bạn có thể chắc chắn rằng mọi kiểu dáng cho một thành phần nhất định đều có ở một vị trí và chỉ áp dụng cho thành phần mà nó được nhập
  • Bạn đã bao giờ suy nghĩ liệu bạn có thể loại bỏ một số xu hướng thời trang mà không gây ra thiệt hại cho thứ gì đó không?
  • Bạn liên tục buộc phải suy nghĩ về hậu quả khi bạn viết các kiểu, dẫn đến mã rõ ràng
  • Vấn đề về phạm vi toàn cầu được tránh bằng cách sử dụng Mô-đun CSS và ý tưởng về phạm vi cục bộ theo mặc định. Khi bạn chọn phong cách viết của mình, bạn phải xem xét các tác động
  • Kiểu sẽ không được áp dụng, ví dụ: nếu bạn sử dụng lớp tổng ngẫu nhiên trong HTML mà không áp dụng nó dưới dạng lớp kiểu Mô-đun CSS vì bộ chọn CSS sẽ được thay đổi kiểu giá trị tổng ngẫu nhiên

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

Một điểm rất hay là không cần cấu hình WebPack. React xử lý mọi thứ cho bạn khi bạn cài đặt ứng dụng tạo-React;

Nếu bạn thêm Bản mô tả vào dự án React hiện có, thông thường bạn sẽ gặp lỗi khi sử dụng Mô-đun CSS. Để giải quyết vấn đề này, hãy cài đặt Typescript với React bằng dòng lệnh sau

npx create-react-app my-app --template typescript

Kể từ khi tôi bắt đầu sử dụng React Typescript với CSS Modules, tôi đã gặp phải vấn đề này. Để bắt đầu sử dụng Mô-đun CSS trong Dự án React, bạn không cần nhập hoặc cài đặt bất kỳ thư viện bên thứ ba nào. Bạn phải nhập mô-đun CSS trước khi sử dụng các thành phần React của nó

Không cần mã bổ sung hoặc mã của bên thứ ba mà bạn đang thêm vào Mô-đun CSS khi sử dụng chúng. Bạn chỉ cần thay đổi tên tệp CSS thành “[filename]. mô-đun. css”; . Bạn phải sử dụng từ khóa nhập khi sử dụng Mô-đun CSS để nhập tệp vào một thành phần cụ thể. Bạn phải chỉ định các lớp khi tích hợp Mô-đun CSS vào dự án React của mình, chẳng hạn như cách bạn truy cập thuộc tính của đối tượng trong Javascript tiêu chuẩn bằng cách sử dụng ký hiệu dấu chấm hoặc cú pháp dấu ngoặc

Sử dụng ký hiệu dấu chấm

Bạn nên sử dụng ký hiệu ngoặc nếu các lớp CSS của bạn chứa dấu gạch nối

Bạn có thể kết hợp phong cách

const buttonClasses = classes.myBtn+ " " + classes.extra_classes;

Tôi tin rằng mọi thứ đều rõ ràng. Đây là những khái niệm cơ bản của một đối tượng Javascript đơn giản

Tạo một mô-đun CSS

Các thư viện CSS như Styled Component, Emotion và styled-jsx ngày nay được phổ biến rộng rãi. Tôi đã quan sát thấy rằng Mô-đun CSS là con đường phía trước, đặc biệt là đối với phạm vi toàn cầu và chất lượng có thể tái sử dụng giúp trải nghiệm tạo kiểu trở nên liền mạch hơn nhiều. Các mô-đun CSS đang được sử dụng rộng rãi hơn để mô tả các kiểu cục bộ và tránh phạm vi toàn cầu trong một thành phần cụ thể

Hãy bắt đầu bằng cách làm việc trên một dự án khiêm tốn. Chúng tôi sẽ tạo một [fileName]. mô-đun. tập tin css. Thành phần nơi [fileName] của chúng tôi. mô-đun. css sẽ được nhập được hiển thị bên dưới

Người dùng TypeScript phải thêm một. d. tập tin ts; . mô-đun. css. d. ts. ”

// [fileName].module.css.d.ts
export const styles: string;
export const someStyles: string;
export const moreStyles: string;

[Tên tệp]. mô-đun. css sẽ như sau

.container {
    width: 500px;
    padding: 20px;
    background-color: white;
    box-shadow: 17px 18px 10px #767676;
    text-align: center;
    line-height: 3;
    margin: 20px;
}
.border_radius {
    border-radius: 40px;
}
.counter-title {
    color: cornflowerblue;
    font-family: cursive;
    font-weight: bolder;
}
.container button {
    background-color: cornflowerblue;
    padding: 15px 20px;
    border-radius: 10px;
    color: white;
    border: none;
    outline: none;
}

Nhập biểu định kiểu của mô-đun CSS dưới tiền tố [classes] hoặc kiểu để thêm nó vào thành phần. Tiền tố kiểu hoặc lớp không bắt buộc, nhưng chúng tôi sẽ sử dụng các lớp để thực hành tốt nhất. Để sử dụng các kiểu, đảm bảo đường dẫn bao gồm “. /[tên tệp]. mô-đun. css”

import classes from "./Styles.module.css";

Tích hợp các mô-đun CSS

Trong khi sử dụng kiểu dưới dạng đối tượng JavaScript để xử lý bổ sung và bảo mật, Mô-đun CSS cho phép bạn viết kiểu trong tệp CSS. Ký hiệu dấu chấm hoặc dấu ngoặc được hiển thị ở trên (Trong chủ đề Sử dụng Mô-đun CSS) phải được sử dụng để tham chiếu các Mô-đun CSS đã nhập trong thành phần React của chúng tôi. Trong thành phần React của chúng tôi, việc tận dụng các Mô-đun CSS được thể hiện trong đoạn mã sau

Trong Thành phần chức năng phản ứng, chúng tôi sẽ sử dụng Mô-đun CSS. Mã bên dưới tăng giá trị đếm lên một và sử dụng useState trong FunctionCounter. js Thành phần sẽ được tạo

import React, { useState } from "react";
import classes from "./Styles.module.css";
const FunctionCounter = () => {
    const [counter, setCounter] = useState(0);
    const handleClick = () => {
    setCounter(counter + 2);
    };
    return (
    <React.Fragment>
        <div className={classes.container}>
        <p>Function Base Component p>
        <p className={classes["paragraph-text"]}>Increase by 2p>
        <h2 className={classes["counter-title"]}>{counter}h2>
        <button onClick={handleClick}>Generatebutton>
        div>
    React.Fragment>
    );
};
export default FunctionCounter;

Chúng ta sẽ thấy một thành phần lớp với các Mô-đun CSS. Chúng tôi sẽ tạo một thành phần cơ sở Lớp với ClassClunter. phần mở rộng tệp js. Đoạn mã dưới đây tăng giá trị của số đếm lên 2

________số 8_______

Cuối cùng, hãy xem Ứng dụng. thành phần js. Chúng tôi sẽ nhập FunctionCounter. js và ClassCounter. js vào Ứng dụng. thành phần js

import React from "react";
import ClassCounter from "./ClassCounter";
import FunctionCounter from "./FunctionCounter";
const App = () => {
    return (
    <div>
        <FunctionCounter />
        <br />
        <ClassCounter />
    div>
    );
};
export default App;

Đầu ra Thành phần dựa trên chức năng và lớp từ Mô-đun CSS của bạn được hiển thị bên dưới

Không tìm thấy mô-đun không thể giải quyết kiểu css toàn cầu

Hãy cùng điều tra trình duyệt để quan sát cách mà

4 được hình thành bằng cách sử dụng hàm băm thu được từ các Mô-đun CSS và xem mã trên trình duyệt

Không tìm thấy mô-đun không thể giải quyết kiểu css toàn cầu

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Không tìm thấy mô-đun không thể giải quyết kiểu css toàn cầu

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

CSS toàn cầu

Việc sử dụng CSS toàn cầu không bị cấm bởi Mô-đun CSS. Bạn có thể nhập biểu định kiểu của mình bằng cách sử dụng cùng một phương pháp bạn đã sử dụng để nhập ES6

0

Ngoài ra, bạn có thể sử dụng từ khóa “toàn cầu” để thay đổi phạm vi của lớp sao cho Mô-đun CSS không thể sửa đổi nó, chẳng hạn như bằng cách nối thêm một id ngẫu nhiên bên cạnh nó

1Nhiều mô-đun CSS

Việc sử dụng nhiều lớp không bị hạn chế bởi Mô-đun CSS;

2

Bộ chọn lớp giả

Bộ chọn được gọi là lớp giả chọn ra các mục ở trạng thái cụ thể. Vì các mô-đun CSS hoạt động bằng cách cung cấp các lớp cho mục của bạn, nên việc thêm các bộ chọn lớp giả rất đơn giản

3

Phần kết luận

Trong bài viết này, chúng ta đã học cách sử dụng CSS Modules trong React Function và Class Base Component. Theo tôi, các Mô-đun CSS là một giải pháp lý tưởng cho các vấn đề nêu trên. Dù bạn quyết định thế nào, đừng để sự huyên náo đánh lừa bạn; . Tất cả chúng ta phải chấp nhận rằng sự cường điệu đó cuối cùng sẽ phai nhạt. Luôn có chỗ để cải thiện tính hữu dụng của chương trình này và kiến ​​thức của bạn về các Mô-đun CSS

Kho lưu trữ trên Github

Nhấn vào đây để xem dự án đã hoàn thành trên Github

MẸO TỪ NGƯỜI BIÊN TẬP. Để thảo luận về các cách làm việc khác nhau với CSS trong JavaScript, đừng bỏ lỡ bài viết 5 CSS-in-JS Frameworks để sử dụng trong năm 2021 của chúng tôi

Làm cách nào để nhập CSS toàn cầu trong nextjs?

Thêm biểu định kiểu chung . js import the CSS file within pages/_app.js . Tạo một trang/_ứng dụng. js nếu chưa có. Sau đó, nhập các kiểu. tập tin css. Những phong cách này ( phong cách. css ) sẽ áp dụng cho tất cả các trang và thành phần trong ứng dụng của bạn.

CSS mô-đun là gì?

Mô-đun CSS là " tệp CSS trong đó tất cả tên lớp và tên hoạt ảnh được đặt trong phạm vi cục bộ theo mặc định ". Thay vì có các tệp và lớp CSS tĩnh, Mô-đun CSS tạo triển khai động nằm trong phạm vi cục bộ cho HTML với sự trợ giúp của Webpack hoặc Browserify.

Khung CSS nào là tốt nhất cho JS tiếp theo?

Tailwind CSS là một trong những khung CSS nổi tiếng nhất hiện có và đặc biệt được sử dụng với React. js và Tiếp theo. js. Đây là khung CSS ưu tiên tiện ích được đóng gói với các lớp như flex flex-start pt-4 items-center có thể được tạo để xây dựng bất kỳ thiết kế nào, trực tiếp trong phần đánh dấu của bạn.

Làm cách nào để thêm các thành phần được tạo kiểu vào js tiếp theo?

Làm cách nào để cài đặt Thành phần được tạo kiểu? .
cài đặt npm --save styled-components. .
sợi thêm các thành phần theo kiểu. .
"nghị quyết". { "thành phần theo kiểu". "^5" }.
nhập theo kiểu từ "các thành phần được tạo kiểu";.
sợi thêm babel-plugin-styled-components --dev. .
cài đặt npm --save-dev babel-plugin-styled-components