如何使 react-chrono 时间轴框更小

【问题标题】：How to make react-chrono timeline box smaller如何使 react-chrono 时间轴框更小
【发布时间】：2022-11-20 08:04:16
【问题描述】：

我正在使用 react-chrono 在我的应用程序中实现时间线，但是无论我多么努力，我都无法设置框的宽度。我当前的实现看起来像this。

我也想让卡片变小。这是我当前的代码：

    <div className="flex flex-col m-5">
      <div className="hidden sm:block">
        <CardSection />
        <div className="h-80 bg-slate-200">
          <Chrono mode="VERTICAL" items={items}></Chrono>
        </div>
      </div>
    </div>

感谢帮助！

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

如果你想让整个时间线更窄，你应该能够在你的<div> wrapper 上设置一个宽度：

<div className="w-40 h-80 bg-slate-200">

如果你还想让卡片变窄，看起来 react-chrono 提供了一个 cardWidth 属性。这是未经测试的：

<Chrono mode="VERTICAL" cardWidth={120} items={items}></Chrono>

查看https://www.npmjs.com/package/react-chrono#props了解所有可用的道具。

【讨论】：

【解决方案2】：

在 react-chrono 文档中它说： “请确保将组件包装在具有宽度和高度的容器中。”

像这样尝试：（宽度你自己的宽度和高度）

<div style={{ width: "500px", height: "400px" }}>
 <Chrono items={items} />
</div>

希望能帮助到你

【讨论】：