react css module

// React CSS Module 示例代码

// 1. 创建一个 CSS 模块文件 Button.module.css
// 文件内容如下：
/*
.Button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.Button:hover {
  background-color: darkblue;
}
*/

// 2. 在 React 组件中使用 CSS 模块
import React from 'react';
import styles from './Button.module.css'; // 引入 CSS 模块

const Button = () => {
  return (
    <button className={styles.Button}>
      Click Me
    </button>
  );
};

export default Button;

// 解释说明：
// - CSS 模块通过将样式限定在局部作用域内，避免了全局样式的冲突。
// - 在 React 组件中引入 CSS 模块时，会返回一个对象，其中键名是类名，值是唯一的哈希字符串。
// - 使用 `className={styles.Button}` 可以确保样式仅应用于当前组件中的元素。