Cách sử dụng CSS MODULE trong React

Trong React, khi bạn import một file css thông thường, nó sẽ load trên tất cả các trang. Vì vậy, để tải css trên 1 trang bạn có thể sử dụng css module

1. Cách thông thường

Giả sử bạn có đoạn mã sau:

// Login.js
import './Login.css';

function Login() {

    return (
        <div>        
            <div className="inputs" >            
                <input className="green-button" type="submit" /> 
                <i className="loading hidden"></i> 
            </div>
        </div>
    )
}

export default Login

Với cách trên, tệp Login.css sẽ được tải trên tất cả các trang.

2. Sử dụng css module trong React

Lưu ý: tính năng này khả dụng với react-scripts@2.0.0 và cao hơn.

Bây giờ ta sẽ áp dụng css Module với đoạn mã trên:

  • Đổi tên Login.css thành Login.module.css
  • Các thay đổi sẽ như sau:
// Login.js
import styles from './Login.module.css';  
// Đổi phần mở rộng .css thành .module.css
// Chú ý: styles

function Login() {

    return (
        <div>        
            <div className={styles.inputs}>            
                <input className={styles["green-button"]} type="submit" /> 
                <i className={`${styles["loading"]} ${styles["hidden"]}`}></i>
           </div> 
        </div>
    )
}

export default Login

So sánh từng className ta thấy cách viết khác nhau tùy theo các phần tử trong class

  • className="inputs" | className={styles.inputs}
  • className="green-button" | className={styles["green-button"]}
  • className="loading hidden" | className={`${styles["loading"]} ${styles["hidden"]}`}

3. OUT PUT

<div class="Login_inputs__3e7Sa">
<input class="Login_green-button__2rOCi" type="submit">
<i class="Login_loading__Ez8qM Login_hidden__1YFdV"></i>

Tham khảo thêm: Adding a CSS Modules Stylesheet