说说react中引入css的方式有哪些并区别在哪

React 是一个 UI 库，它使用了组件化开发的模式，让我们更加容易的管理我们的代码，因此，React 中如何引入 CSS 样式也是一个很重要的问题。

在 React 中，常用的引入 CSS 的方式有以下三种：

1. 在组件中直接引入样式

这是最简单的引入 CSS 的方式。我们可以直接在组件中的 JSX 中通过 className 属性来引入样式类，样式内容可以写在组件的 JS 文件中，也可以独立成一个 CSS 文件。

import React from 'react';

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1>这是一个组件</h1>
      <p>这是组件的内容。</p>
    </div>
  );
}

export default MyComponent;

/* 在同一文件中，或者在另一个 CSS 文件中 */
.my-component {
  background-color: #f5f5f5;
  padding: 20px;
}

2. 在入口文件中引入样式（Global CSS）

如果我们想要引入全局的样式（包括所有的组件），可以在入口文件中引入样式。入口文件指的是包含 ReactDOM.render 的文件。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './index.css'; // 引入全局的 CSS 样式

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

3. 使用 CSS Modules

CSS Modules 是一个有趣的概念，它可以帮助我们避免命名冲突和样式泄漏的问题。CSS Modules 具体来说就是给我们的 CSS 文件加上了一个唯一的标识符，这个标识符在 JS 文件里可以通过 import 引入。CSS Modules 允许我们一次性导出多个类名，当我们需要使用它们时，只需从 import 中导入并使用。可以通过在文件名中添加 .module.css 后缀启用 CSS Modules。

// MyComponent.module.css
.my-component {
  background-color: #f5f5f5;
  padding: 20px;
}

.title {
  font-size: 24px;
}

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

const MyComponent = () => {
  return (
    <div className={styles['my-component']}>
      <h1 className={styles.title}>这是一个组件</h1>
      <p>这是组件的内容。</p>
    </div>
  );
}

export default MyComponent;

上述三种方式的区别在于：

1. 第一种方式是直接在组件的 JSX 中引入样式类，引入的样式只作用于该组件。样式写在 JS 文件中或者独立的 CSS 文件中，这里可以灵活选择。
2. 第二种方式是在入口文件中引入样式，这样引入的样式会作用于所有的组件，适用于全局通用的样式。
3. 第三种方式是使用了 CSS Modules，可以有效地避免命名冲突和样式泄漏等问题。

总的来说，这些引入 CSS 的方式各有优缺点，开发者可以根据具体的需求选择最适合自己项目的方式。