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

Web
1

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