如何在 React 中使用 SASS/SCSS 设置样式？

在 React 中使用 SASS/SCSS 设置样式可以提高代码可读性和维护性，并且可以方便地使用变量、mixin、嵌套等特性。具体步骤如下：

安装依赖

要在 React 中使用 SASS/SCSS，需要先安装相关依赖：

npm install node-sass

创建样式文件

在 React 项目的 src 目录下创建一个新文件夹 styles，并在其中新建一个 SCSS 文件，例如 main.scss。

引入样式文件

在 React 组件或者 index.js 文件中引入样式文件：

import './styles/main.scss';

使用样式

在 SCSS 文件中定义样式规则，例如：

$primary-color: #337ab7; // 定义变量

button {
  background-color: $primary-color;
  color: white;

  &:hover {
    background-color: darken($primary-color, 10%); // 使用内置函数
  }
}

在 React 组件中使用样式：

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

function MyButton() {
  return <button className="my-button">Click me</button>;
}

可以使用类名 my-button 来应用样式：

.my-button {
  @extend button; // 使用继承
  padding: 10px 20px;

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

总结

在 React 中使用 SASS/SCSS 设置样式可以提高代码可读性和维护性，并且可以方便地使用变量、mixin、嵌套等特性。需要安装相关依赖，创建样式文件，引入样式文件，并在组件中使用类名来应用样式。