为什么我的反应大日历看起来像这样？答案

【问题标题】：why does my react-big-calendar looks like this?为什么我的反应大日历看起来像这样？
【发布时间】：2021-08-24 15:01:12
【问题描述】：

我刚刚开始使用 react-big-calendar ，我只是写了简单的代码来显示带有事件的日历，它看起来像这样，

是 BC 我没有添加任何样式吗？这是我的代码


import React, { FC } from 'react';

import moment from 'moment';
import { Calendar, momentLocalizer } from 'react-big-calendar';

const events = [
 {
   title: 'All Day Event very long title',
   allDay: true,
   start: new Date(2021, 3, 0),
   end: new Date(2021, 3, 1),
 },
 {
   title: 'Long Event',
   start: new Date(2021, 3, 7),
   end: new Date(2021, 3, 10),
 },

 {
   title: 'DTS STARTS',
   start: new Date(2021, 2, 13, 0, 0, 0),
   end: new Date(2021, 2, 20, 0, 0, 0),
 },

 {
   title: 'DTS ENDS',
   start: new Date(2021, 10, 6, 0, 0, 0),
   end: new Date(2021, 10, 13, 0, 0, 0),
 },

];

export const LeaveCalendar: FC = () => {
 const localizer = momentLocalizer(moment);

 const weekendDay = (current: moment.Moment) => {
   const weekDay = current.isoWeekday();
   const isWeekend: boolean = weekDay === 5 || weekDay === 6;

   return isWeekend;
 };
 return (
   <div style={{ height: '100%', width: '100%' }}>
     <Calendar
       localizer={localizer}
       events={events}
       startAccessor="start"
       endAccessor="end"
       style={{ height: 500 }}
     />
   </div>
 );
};

为什么看起来。像这样？

【问题讨论】：

标签： javascript reactjs react-big-calendar

【解决方案1】：

是的，你必须添加样式

import 'react-big-calendar/lib/css/react-big-calendar.css'

【讨论】：