React中编写CSS实例详解

下面是React中编写CSS的完整攻略：

1. 概述

React是用JavaScript编写组件的，但是每个组件都需要界面展示，这就需要用到CSS。在React中，推荐使用CSS模块化方式，这样能够避免全局CSS污染的问题。本文将详细讲解在React中编写CSS的实例操作过程。

2. 在React中使用CSS模块化

2.1 安装CSS模块化

首先在终端中执行以下命令安装CSS模块化库：

npm install --save-dev style-loader css-loader

2.2 在组件中引入样式文件

在组件代码文件中，可以使用import来引入样式文件。以下是引入样式文件的示例：

import styles from './styles.module.css';

class MyComponent extends React.Component {
  render() {
    return <div className={styles.container}>Hello World</div>;
  }
}

上面代码中，styles是由CSS模块化库创建的一个包含所有样式类名映射关系的对象。使用对象属性container作为类名应用在组件的根div元素上。

2.3 在样式文件中定义样式类名

在样式文件中，使用.module.css文件后缀名，并且样式类名要用:local()包裹，这样样式类名就不会被全局污染。示例如下：

.container {
  color: red;
}

3. 实例演示

3.1 使用CSS模块化定义样式

在React项目中创建Button组件，使其具有primary和secondary两种样式。在Button组件中引入样式表文件，使用:local()包裹的样式类名，这样不同的组件之间不会相互干扰。

（1）创建样式表文件Button.module.css，并编写以下代码：

.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

（2）在Button组件代码文件中引入样式表并应用样式，如下所示：

import styles from './Button.module.css';

function Button(props) {
  const { type, children, onClick } = props;

  let className;
  if (type === 'primary') {
    className = styles['btn-primary'];
  } else if (type === 'secondary') {
    className = styles['btn-secondary'];
  }

  return (
    <button
      className={className}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

export default Button;

3.2 使用CSS-in-JS定义样式

除了使用CSS模块化方法，还可以使用CSS-in-JS方式定义样式，即在组件代码文件中直接定义样式对象，这样样式也不会被全局污染。

（1）安装styled-components库，执行以下命令：

npm install --save styled-components

（2）在代码文件中引入库并定义样式，如下所示：

import styled from 'styled-components';

const PrimaryButton = styled.button`
  background-color: blue;
  color: white;
`;

const SecondaryButton = styled.button`
  background-color: gray;
  color: white;
`;

function Button(props) {
  const { type, children, onClick } = props;

  let Component;
  if (type === 'primary') {
    Component = PrimaryButton;
  } else if (type === 'secondary') {
    Component = SecondaryButton;
  }

  return (
    <Component onClick={onClick}>
      {children}
    </Component>
  )
}

export default Button;

4. 总结

本文讲解了在React中使用CSS模块化和CSS-in-JS两种方式来定义样式，避免全局CSS污染问题。演示了两个示例，一个使用CSS模块化定义样式，一个使用CSS-in-JS定义样式。希望这篇文章能给React开发者带来帮助。