css - 带有 Bootstrap 4.0 alpha 布局的 React-big-calendar 丑陋

Question

我使用的是 bootstrap 4.0 alpha，没有其他样式。布局非常丑陋，日历只显示一列而不是表格。知道为什么以及如何做吗？

我从网站上注意到以下内容，但我不明白我应该怎么做:

note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).

这是我的渲染代码:

    render() {
    return (
        <div className="container">
            <TaskSearchBar
                search={this.onSearch}
            />
            <BigCalendar
                selectable
                events={[]}
                defaultView='week'
                scrollToTime={new Date(1970, 1, 1, 6)}
                defaultDate={new Date(2015, 3, 12)}
                onSelectEvent={event => alert(event.title)}
                onSelectSlot={(slotInfo) => alert(
                    `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
                    `\nend: ${slotInfo.end.toLocaleString()}`
                )}
            />
            <TaskList
                queryUrl={this.state.queryUrl}
            />
        </div>
    );
}

这是布局结果

Answer 1

我发现我错过了这一行:


require('react-big-calendar/lib/css/react-big-calendar.css');


感谢enter link description here