Mô-đun css so với css

Ở bài viết này, chúng ta sẽ sử dụng CSS Modules trong React. Nếu bạn sử dụng ứng dụng tạo phản ứng [v2] để thiết lập ứng dụng phản ứng của mình thì các Mô-đun CSS đã được thiết lập sẵn. tạo-react-app [v2] để thiết lập ứng dụng phản ứng của bạn thì CSS Modules đã được thiết lập sẵn

Vì vậy còn chờ gì nữa ?

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

Bắt đầu với 1 thành phần Logo được tạo kiểu bằng SASS và chuyển đổi nó sang kiểu Mô-đun CSS

/* -- Logo.js -- */

import React from "react";

const Logo = [] => {
  return [
    
      
        
        
        
          {`thebao`}
          {`dev`}
        
      
    
  ];
};

export default Logo

Thành phần kiểu với Mô-đun CSS

1. Tạo tệp Mô-đun CSS

Chúng ta sẽ tạo 1 file scss với định dạng là ComponentName.module.scss cùng thư mục với Logo. js và bắt dầu style component Logo

Lưu ý ở ví dụ này mình sử dụng SCSS, các bạn hoàn toàn có thể sử dụng vanila CSS với.module.css

/* -- Logo.module.scss -- */
        
.logo-wrapper {
  position: relative;
  z-index: 10;
  margin: 0 auto;


.logo-text {
  font-size: $font-size-large;
  padding: 0 .5rem;

  @include flexbox[];

  @include align-items[center];

  @include position[relative];

  .content {
    font-family: $font-family-logo;
    background-color: $white;
    color: $primary;
    margin: auto 10px;
    padding: 5px 10px;
    border-radius: $border-radius-base;
    transform: skew[-15deg, 0deg];
  }

  .key {
    font-size: $font-size-super-large;
  }

  .name {
    font-size: $font-size-large;
  }

  .extra {
    background-color: $info;
    border-radius: $border-radius-base;
    opacity: .4;
    transform: skew[-15deg, 0deg];
    z-index: -1;

    @include size[30px, 25px];

    &-right {
      @include position[absolute, -6px, 2px, null, null];
    }

    &-left {
      @include position[absolute, null, null, -6px, 2px];
    }
  }

2. Nhập mô-đun CSS

Nhập các kiểu trên Logo. thành phần js. Biến logoStyles là 1 đối tượng chứa các kiểu CSS đã được xác định ở trên. Từ đó chúng ta có thể lấy các tên lớp đã được tạo-phản ứng-ứng dụng mô-đun hóa [*] và sử dụng chúng trong JSX của thành phần Logo. logoStyles là 1 đối tượng chứa các kiểu CSS đã xác định ở trên. Từ đó chúng ta có thể lấy các tên lớp đã được tạo-phản ứng-ứng dụng mô-đun hóa [*] và sử dụng chúng trong JSX của thành phần Logo

 /* -- Logo.js -- */
        
import React from "react";

/* Import logoStyles */
import logoStyles from "./Logo.module.scss";

const Logo = [] => {
  return [
    
      
        
        
        
          {`thebao`}
          {`dev`}
        
      
    
  ];
};

export default Logo

*mô-đun hóa. Khi chúng ta kiểm tra thành phần Logo, các tên lớp còn được thêm vào 1 chuỗi ký tự phía sau nó. Điều này giúp cho tên lớp là duy nhất, chỉ phạm vi trong thành phần nhập nó. Lưu ý là nhập Logo. mô-đun. scss ở 2 thành phần khác nhau thì nó cũng là 2 chuỗi ký tự khác nhau. Giải quyết các vấn đề xung đột, tính đặc hiệu của CSS và xếp tầng. mô-đun hóa. Khi chúng ta kiểm tra thành phần Logo, các tên lớp còn được thêm vào 1 chuỗi ký tự phía sau nó. Điều này giúp cho tên lớp là duy nhất, phạm vi duy nhất trong thành phần nhập nó. Lưu ý là nhập Logo. mô-đun. scss ở 2 thành phần khác nhau thì nó cũng là 2 chuỗi ký tự khác nhau. Giải quyết các vấn đề xung đột, tính đặc hiệu của CSS và xếp tầng