Cách tạo kiểu cho các thành phần React bằng cách sử dụng mô-đun CSS

Cách tạo kiểu cho các thành phần React bằng cách sử dụng mô-đun CSS

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, tại sao bạn nên sử dụng chúng và cách triển khai chúng trong một dự án React.



c ++ vẫn được sử dụng

Mô-đun CSS là gì?

Các Tài liệu về 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ể giải quyết 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 ra các tên lớp duy nhất trước khi gửi CSS đến trình duyệt.

Ví dụ: hãy xem xét lớp .btn sau trong tệp có tên styles.modules.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 chiếu đến lớp .btn và làm cho nó có sẵn trong một phần tử, bạn sẽ sử dụng lớp như hình dưới đây:



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ủa định dạng như _styles__btn_118346908.

Tính duy nhất của 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 với nhau. Bạn có thể đảm bảo tính độc lập của 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, cụ thể 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 bảng đị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 sáng tác từ khóa. Ví dụ, hãy xem xét lớp .btn sau đây ở 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ản soạn.

Đối với 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 lớp .btn và .submit. Bạn cũng có thể soạn các kiểu từ một mô-đun CSS khác như sau:

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

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

Cách sử dụng 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 create-react-app, 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 phải định cấu hình các mô-đun CSS bằng một trình biên dịch như webpack.

cách sửa loa ngoài iphone 6

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

  • Đã cài đặt nút trên máy của bạn.
  • Hiểu biết cơ bản về các mô-đun ES6.
  • Một cơ bản hiểu biết về React .

Tạo một ứng dụng React

Để giữ mọi thứ đơn giản, bạn có thể sử dụng tạo-phản ứng-ứng dụng để xây dựng một ứng dụng React.

Chạy lệnh này để tạo một dự án React mới được gọi là react-css-modules:

npx create-react-app react-css-modules

Thao tác này sẽ tạo một tệp mới có tên là react-css-modules 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à Button.module.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.

Hướng đến src / Thành phần / Nút và tạo Button.js.

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

Tiếp theo, tạo một tệp mới có tên là Button.module.css và thêm những thứ sau.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Để 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 phần tử nút như sau:

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

Đâ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ẻ 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 composes như đã đề cập trước đó trong bài viết này.

cập nhật cửa hàng google play cho android

Sử dụng thành phần

Đầu tiên, sửa đổi thành phần Nút bằng đoạn 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 năng động hơn bằng cách chấp nhận một giá trị kiểu làm chỗ dựa. Kiểu 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 thay vì viết tất cả các kiểu cho mỗi nút từ đầu, hãy thêm phần sau vào Button.module.css.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

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 xa hơn nữa với một mô-đun CSS bên ngoài được gọi là color.module.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 tệp color.module.css trong thư mục gốc của thư mục Thành phần với mã sau:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Bây giờ trong tệp Button / Button.module.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ư sau:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass với mô-đun CSS

Bạn có thể sử dụng 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 một 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 mô-đun CSS của bạn, hãy sử dụng Sass. Sass — Trang tính kiểu tuyệt vời theo cú pháp — là một bộ xử lý trước 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 nhiều tính năng phức tạp hơn vào ứng dụng của mình.