是否可以在反应中使用CSS定制FullCalendar？

Question

我只是从FullCalendar开始，我正在一个[[react项目中实现它，现在一切都很好，但是我想自定义实际的日历，希望它能满足我的客户需求。

我的问题：是否可以像这样向FullCalendar组件添加

classname

：（我尝试过，但是我的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，这就是为什么我要求在组件中放置类名的原因，以便我可以在不触摸Monthview的情况下设置dayview / monthview的样式。或者如何创建自己的主题？
感谢社区
    

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