如何使用styles.module.scss在react-big-calendar中应用自定义样式

Question

我正在使用

react-big-calendar

库来创建日历，但我一直坚持自定义日历的样式，并且 SCSS 不适用

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

styles.module.scss

：

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

  .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;
  }
}

Answer 1

您引用的所有

rbc-

前缀类都是大日历中的“全局”类，在样式表中定义，您仍然必须将其包含在界面中，因为这就是大日历在应用时引用它们的方式。您的 scss 模块需要显示这一点。

.calendar {
  :global(.rbc-time-header-gutter),
  // etc
}