React中的CSS局部引入过程

当在React中使用CSS时，可以使用局部引入的方式来管理样式。这种方式可以确保每个组件的样式只应用于该组件本身，而不会影响其他组件。下面是React中CSS局部引入的完整攻略：

1. 创建一个React组件，并在组件的同级目录下创建一个CSS文件。例如，我们创建一个名为\"Button\"的组件，并在同级目录下创建一个名为\"Button.css\"的CSS文件。

2. 在\"Button\"组件的JavaScript文件中，使用import语句将CSS文件引入。例如，我们可以在\"Button.js\"文件的顶部添加以下代码：

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

1. 在\"Button\"组件的render方法中，使用className属性来应用CSS样式。例如，我们可以在render方法中的按钮元素上添加以下代码：

render() {
  return (
    <button className=\"button\">Click me</button>
  );
}

1. 在\"Button.css\"文件中，定义与组件相关的样式。例如，我们可以添加以下代码：

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

这样，当\"Button\"组件被渲染时，它将应用\"Button.css\"文件中定义的样式。

示例1：
假设我们有一个名为\"Header\"的组件，我们可以按照上述步骤创建一个名为\"Header.css\"的CSS文件，并在\"Header.js\"文件中引入它。然后，在\"Header\"组件的render方法中，我们可以使用className属性来应用CSS样式。

import React from 'react';
import './Header.css';

class Header extends React.Component {
  render() {
    return (
      <header className=\"header\">
        <h1>Welcome to my website</h1>
      </header>
    );
  }
}

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

示例2：
假设我们有一个名为\"LoginForm\"的组件，我们可以按照上述步骤创建一个名为\"LoginForm.css\"的CSS文件，并在\"LoginForm.js\"文件中引入它。然后，在\"LoginForm\"组件的render方法中，我们可以使用className属性来应用CSS样式。

import React from 'react';
import './LoginForm.css';

class LoginForm extends React.Component {
  render() {
    return (
      <form className=\"login-form\">
        <input type=\"text\" className=\"input\" placeholder=\"Username\" />
        <input type=\"password\" className=\"input\" placeholder=\"Password\" />
        <button className=\"button\">Login</button>
      </form>
    );
  }
}

.login-form {
  width: 300px;
  margin: 0 auto;
}

.input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

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

这样，\"LoginForm\"组件将应用\"LoginForm.css\"文件中定义的样式。