添加样式表

在 Create React App 中，我们可以使用多种方式来添加样式表到我们的项目中。最常见的方式是使用 CSS 文件，但也可以使用 Sass、Less 或者其他预处理器来编写样式。

使用 CSS 文件

要在 Create React App 中使用 CSS 文件，只需在 src 目录下创建一个新的 CSS 文件，比如 styles.css，然后在组件中引入这个样式表即可。

// www.javascriptcn.com code example
/* styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// www.javascriptcn.com code example
// Button.js

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

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

export default Button;

使用 Sass

如果你更喜欢使用 Sass 来编写样式，也可以在 Create React App 中轻松实现。首先，确保你的项目中已经安装了 node-sass，然后将样式文件改为 .scss 后缀。

// www.javascriptcn.com code example
/* styles.scss */

$primary-color: #007bff;

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.button {
  padding: 10px 20px;
  background-color: $primary-color;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;

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

// www.javascriptcn.com code example
// Button.js

import React from 'react';
import './styles.scss';

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

export default Button;

通过这种方式，你可以方便地添加样式表到你的 Create React App 项目中，让你的应用程序看起来更加漂亮和专业。