如何使用styles.module.scss为react-big-calendar自定义样式（样式不生效）

你的问题出在CSS Modules的局部作用域特性上：CSS Modules会自动给.calendar类添加唯一哈希后缀（比如变成.calendar_xyz123），而react-big-calendar内部的.rbc-*类是全局类名，局部作用域的样式无法穿透到这些全局类上，导致你的嵌套选择器失效。

下面是几种可行的解决方法：

方法1：用:global()包裹全局类选择器（推荐） #

在SCSS中使用:global()语法，让内部的.rbc-*选择器跳过局部作用域处理，保持全局类名：

.calendar {
  :global(.rbc-time-header-gutter,
  .rbc-time-content > .rbc-row > div:not(.rbc-time-gutter),
  .rbc-header,
  .rbc-month-view) {
    border-right: none !important;
  }

  :global(.rbc-month-view .rbc-row:not(.rbc-header-row) > .rbc-day:nth-child(6)) {
    background-color: blue;
  }

  :global(.rbc-month-view .rbc-row:not(.rbc-header-row) > .rbc-day:nth-child(7)) {
    background-color: red;
  }
}

方法2：改用全局CSS文件 #

如果不需要局部作用域，可以把样式文件改成普通的.scss（去掉.module后缀），然后直接导入：

1. 创建calendar.scss（移除.module）
2. 组件中导入：import './calendar.scss';
3. 组件的Calendar标签改成：className="calendar"（不再使用styles.calendar）

这样样式就会以全局作用域生效，直接覆盖react-big-calendar的默认样式。

方法3：使用CSS-in-JS方案（如styled-components） #

如果项目已经在用CSS-in-JS库，可以直接通过样式化组件来覆盖：

import styled from 'styled-components';

const StyledCalendar = styled(Calendar)`
  .rbc-time-header-gutter,
  .rbc-time-content > .rbc-row > div:not(.rbc-time-gutter),
  .rbc-header,
  .rbc-month-view {
    border-right: none;
  }

  .rbc-month-view .rbc-row:not(.rbc-header-row) > .rbc-day:nth-child(6) {
    background-color: blue;
  }

  .rbc-month-view .rbc-row:not(.rbc-header-row) > .rbc-day:nth-child(7) {
    background-color: red;
  }
`;

export const JobnsCalendar = () => (
  <StyledCalendar
    localizer={localizer}
    views={['month']}
    style={{ height: '80vh' }}
    formats={formats}
    components={{
      toolbar: Toolbar,
    }}
  />
);

注意事项 #

• 尽量避免使用!important，可以通过增加选择器权重来覆盖默认样式（比如重复父类选择器：.calendar.calendar .rbc-header）
• 检查react-big-calendar的版本，部分版本可能有类名变更，确保选择器对应正确

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