react 项目局部样式怎么做

在 React 项目中，局部样式可以通过以下方式来实现：

1. 使用 CSS Modules：CSS Modules 是一种将 CSS 样式作用域限制在组件范围内的技术。它可以让样式表中的类名自动变成唯一的，从而避免了样式的冲突问题。要使用 CSS Modules，需要将样式文件的后缀名改为 `.module.css` 或 `.module.scss`，并在组件中通过 `import` 引入样式文件。例如：

/* styles.module.css */
.button {
  background-color: #007bff;
  color: #fff;
}

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

function Button() {
  return (
    <button className={styles.button}>Click me!</button>
  );
}

export default Button;

在这个例子中，我们将样式文件的后缀名改为 `.module.css`，并在组件中通过 `import` 引入样式文件。在组件中，我们使用 `styles` 对象来访问样式中的类名，从而实现局部样式的效果。

2. 使用 CSS-in-JS 库：CSS-in-JS 库是一种将 CSS 样式嵌入到组件中的技术。它可以让样式和组件代码紧密地耦合在一起，从而减少了样式冲突的可能性。常见的 CSS-in-JS 库有 Styled Components、Emotion、Fela 等等。例如，使用 Styled Components 实现局部样式的代码如下：

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: #fff;
`;

export default Button;

在这个例子中，我们使用 `styled-components` 库来创建了一个名为 `Button` 的组件，并将样式直接嵌入到组件中。这样可以确保样式只作用于当前组件，从而实现局部样式的效果。

总的来说，React 中的局部样式可以通过 CSS Modules 或 CSS-in-JS 库来实现，具体选择哪种方式取决于您的项目需求和个人偏好。