css module

/* styles.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.title {
  font-size: 24px;
  color: #333;
}

// App.js
import React from 'react';
import styles from './styles.module.css';

function App() {
  return (
    <div>
      <h1 className={styles.title}>Welcome to My Website</h1>
      <button className={styles.button}>Click Me</button>
    </div>
  );
}

export default App;

解释说明：

• CSS Module 是一种 CSS 文件，其中的类名和动画名称默认都是局部作用域的，这样可以避免全局样式冲突。
• 在上面的例子中，styles.module.css 文件定义了两个样式：.button 和 .title。这些类名在导入时会被自动转换为唯一的类名，以确保它们只应用于使用它们的组件。
• 在 App.js 文件中，我们通过 import styles from './styles.module.css'; 导入了 CSS 模块，并使用 styles.title 和 styles.button 来应用这些样式。
• 这种方式使得样式更加模块化和可维护，特别是在大型项目中。