是否可以在反应中使用 css 自定义 FullCalendar？

Question

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

我的问题：是否可以像这样将 classname 添加到 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，为什么我要求在我的组件中放置一个类名，这样我就可以在不触及 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>
  );
}

Answer 2

确实，样式化的包装器可以工作。例如，尝试更改日历中的按钮（下一个、上一个）：

import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from '@fullcalendar/timegrid';

// needed for the style wrapper
import styled from "@emotion/styled";

// add styles as css
export const StyleWrapper = styled.div`
  .fc-button.fc-prev-button, .fc-button.fc-next-button, .fc-button.fc-button-primary{
    background: red;
    background-image: none;
}
`

// component with calendar, surround the calendar with the StyleWrapper
function Schedule({ ...props }) {
  return (
    <StyleWrapper>
                      <FullCalendar ... />
    </StyleWrapper>
  );
}

export default Schedule;