如何在React组件中引入并应用SCSS文件的全部样式规则？

看起来你尝试用CSS Modules的方式导入SCSS并通过styleName传递给组件，但这里有几个关键问题需要调整，下面是具体的解决方案：

1. 先理清styleName的使用前提 #

styleName并不是React原生支持的属性，它通常是通过babel-plugin-react-css-modules这类插件实现的语法糖，如果你没有在项目中配置这个插件，React会直接忽略这个属性，这也是你没成功的原因之一。更通用的做法是使用React原生的className结合CSS Modules。

2. 正确将SCSS规则"展开"应用到Calendar组件的方法 #

要让SCSS里的所有规则作用于Calendar组件，核心思路是给组件（或其包裹元素）一个根类名，然后在SCSS中通过嵌套选择器覆盖组件的所有内部样式，具体分两种场景：

场景一：Calendar组件支持传入className属性 #

如果Calendar组件允许你传递className给它的根元素，那可以这么做：

步骤1：修改SCSS文件，用根类嵌套所有样式

// calendar.scss
.calendarRoot {
  // 这里写Calendar根元素的基础样式
  background: #fff;
  border-radius: 4px;

  // 嵌套组件内部的所有子元素样式，比如假设组件内部有.calendar-day、.calendar-header类
  & .calendar-day {
    padding: 8px;
    cursor: pointer;
  }

  & .calendar-header {
    font-weight: bold;
    padding: 12px;
  }

  // 其他所有SCSS规则都嵌套在.calendarRoot下
}

步骤2：在React组件中导入并使用CSS Modules

import React from 'react'
import Calendar from 'calendar'
// CSS Modules默认导出一个对象，包含所有类名的映射
import styles from './calendar.scss'

const CalendarShift = () => (
  // 将根类名传递给Calendar的className属性
  <Calendar className={styles.calendarRoot} />
)
export default CalendarShift

场景二：Calendar组件不支持传入className #

如果组件不接受自定义className，可以用一个容器元素包裹它，然后在SCSS中通过容器的类名来定位内部的Calendar元素：

步骤1：修改SCSS文件，基于容器类嵌套样式

// calendar.scss
.calendarWrapper {
  // 定位Calendar组件的根元素（假设根元素有默认类名.calendar）
  .calendar {
    background: #fff;
    border-radius: 4px;
  }

  .calendar .calendar-day {
    padding: 8px;
    cursor: pointer;
  }

  .calendar .calendar-header {
    font-weight: bold;
    padding: 12px;
  }
}

步骤2：在组件中添加容器并导入SCSS

import React from 'react'
import Calendar from 'calendar'
// 直接导入SCSS，让全局样式生效（不需要CSS Modules）
import './calendar.scss'

const CalendarShift = () => (
  <div className="calendarWrapper">
    <Calendar />
  </div>
)
export default CalendarShift

3. 关于你原代码的问题 #

你原代码中import { calendarStyles } from './calendar.scss'的写法是错误的，CSS Modules默认导出一个包含所有类名的对象，而不是具名导出calendarStyles。另外，即使你拿到了正确的样式对象，也不能直接把整个对象传给styleName或className——因为这两个属性接收的是字符串类型的类名，而不是对象。

内容的提问来源于stack exchange，提问作者Kaiser91