导入后完整日历样式不正确

我正在尝试在我的项目中使用 React Full Calendar，尽管日历以正确的方式呈现，但样式有点不对劲。目前的情况如下：

正如您所看到的，在标题工具栏中，月份单词没有在中间对齐，其他单词和图标也是如此。也许，按钮本身的尺寸在高度上看起来很小。

按钮的功能工作正常，但样式与文档中显示的不同。

这是它实际外观的链接：https://fullcalendar.io/docs/toolbar-demo https://fullcalendar.io/docs/toolbar-demo

以下是我添加 FullCalendar 的方法：

import React, { Component } from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";

import "@fullcalendar/common/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

class TimelineScheduler3 extends Component {

handleDateClick = (arg) => { // bind with an arrow function
 alert(arg.dateStr)
}

render() {



return (
  <FullCalendar
    plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
    initialView="dayGridMonth"
    weekends={true}
    dateClick={this.handleDateClick}
    headerToolbar={{
      left: 'dayGridMonth,timeGridWeek,timeGridDay',
      center: 'title',
      right: 'prevYear,prev,next,nextYear'
    }}
    events={
      [
        { title: 'event 1', date: '2021-05-05' },
        { title: 'event 2', date: '2021-05-07' }
      ]}
  />
)
}
}

  export default TimelineScheduler3;

我的末端是否缺少某些导入，或者我的应用程序的样式是否覆盖了 FullCalendar 的样式？