如何调整 Toast UI 的 React 日历的大小？

Question

我正试图在我的React项目中并排放置两个组件。第一个是我自己编码的组件，第二个是第三方日历。(准确地说，Toast UI的React日历。(

下面是我创建的一个简单的React应用程序，它显示了这个问题。

我试过：

1. 添加一个具有flex显示和默认方向设置为"；行"；围绕两个组件：

// App.js
import "./App.css"
<div className="app">
<MyComponent />
<Calendar />
</div>

// App.css
.app {
display: flex;
flex-default: row;
}

2. 从flex更改为grid，grid-template-columns设置为1 fr和3 fr

// Updated App.css
.app {
display: grid;
grid-template-columns: 1fr 3fr;
}

3. 将每个组件分别设置为float: left和float: right以及width: 25%和width: 75%。带和不带包装div

// App.js
import "./App.css"
{/*<div>*/}
<MyComponent className="list" />
<Calendar className="mycalendar" />
{/*</div>*/}

// App.css
.list {
float: left;
width: 25%;
}
.mycalendar {
float: right;
width: 75%;
}

我猜这个问题与第三方日历有关。不管怎样，它似乎只是想占据整个页面。不过我觉得应该有一个简单的解决方案。

有人知道我该怎么解决吗？

Answer 1

这是引导程序的方式。如果您正在尝试删除css。

<div className='container'>
<div className='row'>
<div className='col'>
<MyComponent />
</div>
<div className='col'>
<Calendar />
</div>
</div>
</div>

这将给MyComponent 50%，给Calendar 50%。您可以调整大小。一旦浏览了引导程序文档：(

css方式：

.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.grid-item {
text-align: center;
}

<div className="grid-container">
<div className="grid-item"><MyComponent /></div>
<div className="grid-item"><Calendar /></div>
</div>