如何调整Toast UI React日历组件尺寸以实现组件并排布局？

在React项目中尝试将自定义组件与第三方Toast UI React日历组件并排展示，先后尝试了flex布局、grid布局、float+百分比宽度三种方案均未成功，推测是日历组件默认样式导致其占满页面宽度。

尝试过的代码示例 #

1. Flex布局尝试

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

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

2. Grid布局尝试

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

3. Float布局尝试

// 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%;
}

解决方法 #

核心问题是Toast UI Calendar组件根元素默认设置了width: 100%，会强制占满父容器宽度，需要先覆盖这个默认行为，再配合布局方案实现并排：

方案一：Flex布局（修正版）

// App.js
import "./App.css";
import MyComponent from "./MyComponent";
import Calendar from "@toast-ui/react-calendar";

function App() {
  return (
    <div className="app-container">
      <MyComponent className="custom-component" />
      <Calendar className="calendar-component" />
    </div>
  );
}

export default App;

// App.css
.app-container {
  display: flex;
  gap: 1rem; /* 可选：添加组件间间距 */
  width: 100%;
}

.custom-component {
  flex: 1; /* 自定义组件占1份宽度 */
}

.calendar-component {
  flex: 3; /* 日历组件占3份宽度 */
  min-width: 0; /* 解决flex子元素内容溢出导致无法收缩的问题 */
}

方案二：Grid布局（修正版）

// App.css
.app-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1rem;
  width: 100%;
}

.calendar-component {
  width: 100%; /* 让日历适配grid列宽 */
}

方案三：Float布局（修正版）

// App.js
import "./App.css";
import MyComponent from "./MyComponent";
import Calendar from "@toast-ui/react-calendar";

function App() {
  return (
    <div className="float-container">
      <MyComponent className="float-left-item" />
      <Calendar className="float-right-item" />
    </div>
  );
}

export default App;

// App.css
.float-container::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动，避免父容器高度塌陷 */
}

.float-left-item {
  float: left;
  width: 25%;
  box-sizing: border-box;
}

.float-right-item {
  float: left; /* 改用left避免宽度计算冲突 */
  width: 75%;
  box-sizing: border-box; /* 确保内边距/边框不超出设定宽度 */
}

关键注意事项 #

• Toast UI Calendar的默认width: 100%会优先生效，所以需要确保自定义样式能覆盖它（可以给日历组件添加自定义类，通过类选择器覆盖默认样式）。
• Flex布局下必须给日历组件添加min-width: 0，否则组件内容溢出时会无法收缩，导致布局失效。

内容的提问来源于stack exchange，提问作者spheroidic