reactjs - 自定义 React 大日历颜色

Question

我是 React Big Calendar 的新手，它看起来非常有用，但我被卡住了。我正在创建一个暗模式网站，默认按钮可以满足我的需求，但文本是黑色的，并且在深色背景上显示效果不佳。有没有办法不创建自定义工具栏而只更改文本颜色（活动按钮、悬停按钮和非活动按钮文本颜色）？我见过自定义工具栏，但仅仅更改默认按钮的文本颜色似乎有点过头了。

谢谢您的帮助。

我正在使用 React Typescript 当然是 React Big Calendar

Answer 1

如果您使用 sass，您可以更改一系列变量，这些变量应该可以满足您的需求。

@import 'react-big-calendar/lib/sass/styles';

$out-of-range-color: lighten(#333, 40%);
$out-of-range-bg-color: lighten(#333, 70%);

$calendar-border: #DDD;
$cell-border: #DDD;

$border-color: #CCC;

$segment-width: percentage(1 / 7);

$time-selection-color: white;
$time-selection-bg-color: rgba(0,0,0, .50);
$date-selection-bg-color: rgba(0,0,0, .10);


$event-bg: #3174ad;
$event-border: darken(#3174ad, 10%);
$event-outline: #3b99fc;
$event-color: #fff;
$event-border-radius: 5px;
$event-padding: 2px 5px;
$event-zindex: 4;

$btn-color: #373a3c;
$btn-bg: #fff;
$btn-border: #ccc;

$current-time-color: #74ad31;

$rbc-css-prefix: rbc-i;

$today-highlight-bg: #eaf6ff;