React 样式的模块化 学习笔记

React 样式模块化学习笔记

1. CSS Modules

CSS Modules 是一种将 CSS 文件模块化的技术，它可以确保样式只作用于特定的组件，避免全局污染。

步骤：

1. 创建一个 .module.css 文件，例如 Button.module.css。
2. 在 React 组件中引入并使用该样式文件。

示例：

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

.button:hover {
  background-color: darkblue;
}

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

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

export default Button;

2. Sass/Scss

Sass 是一种 CSS 预处理器，提供了变量、嵌套、混合等高级功能。Scss 是 Sass 的一种语法，兼容 CSS。

步骤：

1. 安装 Sass：npm install sass。
2. 创建一个 .scss 文件，例如 Button.scss。
3. 在 React 组件中引入并使用该样式文件。

示例：

/* Button.scss */
$primary-color: blue;

.button {
  background-color: $primary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

// Button.js
import React from 'react';
import './Button.scss';

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

export default Button;

3. 不依赖库的写法

如果你不想依赖任何库，可以直接使用内联样式或普通的 CSS 文件。

内联样式：

// Button.js
import React from 'react';

const Button = () => {
  const buttonStyle = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
  };

  return (
    <button style={buttonStyle}>
      Click Me
    </button>
  );
};

export default Button;

普通 CSS 文件：

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

.button:hover {
  background-color: darkblue;
}

// Button.js
import React from 'react';
import './Button.css';

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

export default Button;

总结

• CSS Modules：适合需要局部作用域样式的场景。
• Sass/Scss：适合需要高级 CSS 功能的场景。
• 不依赖库的写法：适合简单项目或不想引入额外依赖的场景。

根据项目需求选择合适的样式方案。