我只找到了对这个问题的过时的回答。我正在尝试更改今天突出显示的背景。我在<Box>
中有<FullCalendar>
组件:
<Box flex={"1 1 100%"} ml={"15px"}>
<FullCalendar
height={"75vh"}
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin
]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
}}
initialView={"dayGridMonth"}
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={handleDateClick}
eventClick={handleEventClick}
eventsSet={(events) => setCurrentEvents(events)}
initialEvents={[
{
id: "aapl_q1_2023",
title: "AAPL Q1 2023",
date: "2023-02-02"
},
{
id: "amzn_q4_2023",
title: "AMZN Q4 2023",
date: "2023-02-02"
},
]}
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
/>
</Box>
我可以通过切换css行项目来手动更改颜色
但是sx
并没有覆盖它:
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
1条答案
按热度按时间vwoqyblh1#
FullCalendar
似乎接受了一个CSS变量--fc-today-bg-color
,用于定制“today”的背景颜色,根据他们的定制guide。如果首选项是使用通过MUI定义的自定义颜色,则可以尝试在包含
FullCalendar
的MUIBox
上使用sx
属性设置CSS变量。最小化的示例:stackblitz
示例:
如果组件已经通过其
styled()
实用程序与MUI连接,则通过sx
prop在FullCalendar
本身上设置此属性也可以工作。