是否可以在React中使用CSS自定义FullCalendar？

Question

我刚刚从 FullCalendar 开始，我正在一个React项目中实现它，现在一切都很好，但我想自定义实际的日历，我希望它尊重我的客户需求。

我的问题：是否可以像这样向 FullCalendar 组件添加类名：（我尝试过，但无法访问 css 文件中的类名）

                <FullCalendar
                  className= "FullCalendarMonthClient"
                  defaultView= "dayGridMonth"
                  plugins={[dayGridPlugin]} 
                  columnHeaderFormat= {{                    
                    weekday: "long"
                  }} 
                  locale="fr"
                  events={[
                    { title: 'event 1', start: '2019-12-06', end: '2019-12-07' },
                    { title: 'event 1', start: '2019-12-06', end: '2019-12-07' }
                  ]}
                />

然后用它来用 css 自定义我的日历。我在同一页面上使用另一个日历，一个 DayView，这就是为什么我要求在我的组件中放置一个类名，这样我就可以设计我的日视图/月视图而不接触月视图。或者我如何创建自己的主题？

感谢社区

Answer 1

您可以创建一个样式包装器来覆盖内部样式。

import FullCalendar from "@fullcalendar/react";
import styled from "@emotion/styled";


export const StyleWrapper = styled.div`
  .fc td {
    background: red;
  }
`


const MyApp = ()=> {
  return (
    <StyleWrapper>
      <FullCalendar/>
    </StyleWrapper>
  );
}