React 中的 CSS 模組是一種透過自動產生唯一類別名稱來確定 CSS 範圍的方法。這可以防止大型應用程式中的類別名稱衝突並允許模組化樣式。以下是如何在 React 專案中使用 CSS 模組：

1. 設定

預設情況下，React 支援 CSS 模組。您只需使用擴展名 .module.css.

2. 設定範例

文件結構：

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

按鈕.模組.css：

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

按鈕.js：

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    
      Click Me
    
  );
}

export default Button;

運作原理：

• Button.module.css：您可以像任何普通 CSS 檔案一樣定義 CSS 規則。
• styles.button：CSS 模組中的類別名稱以 JavaScript 物件導入。您可以使用 styles.className.
來引用它們

好處：

• 作用域樣式：每個類別的作用域都是本機元件，避免名稱衝突。
• 可維護性：隨著應用程式的成長，您的 CSS 保持模組化並且更易於管理。

如果您需要特定案例的幫助，請告訴我！