css modules

/* styles.module.css */
.title {
  font-size: 24px;
  color: blue;
}

.content {
  margin-top: 10px;
  background-color: #f0f0f0;
}

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

function App() {
  return (
    <div className={styles.content}>
      <h1 className={styles.title}>Hello CSS Modules!</h1>
      <p>This is a paragraph inside a styled div.</p>
    </div>
  );
}

export default App;

解释说明

1. CSS 文件 (styles.module.css):

   • 使用 .module.css 扩展名来定义一个 CSS 模块。
   • 每个类名在模块中是唯一的，不会与全局样式冲突。

2. JSX 文件 (App.js):

   • 使用 import styles from './styles.module.css'; 导入 CSS 模块。
   • 使用 styles.title 和 styles.content 来引用 CSS 模块中的类名，确保样式仅应用于当前组件，避免全局污染。