自定义React Big Calendar颜色

Question

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

感谢您的帮助。

我正在使用 反应 打字稿 当然是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;