如何缩小react-chrono时间线的盒子及卡片宽度？

我之前也碰到过react-chrono的样式自定义难题，这组件默认的样式确实有点“顽固”，咱们一步步来搞定它：

1. 强制设置时间线盒子的宽度 #

react-chrono的根容器默认会占满父元素，但有时候父元素的样式优先级不够，你可以试试这两种方法：

方法一：通过内联样式直接给Chrono组件设置宽度 #

直接给<Chrono>加style属性，优先级更高，能快速覆盖默认样式：

<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}
        style={{ width: '80%', maxWidth: '1000px' }} // 自定义宽度，可根据需求调整
      ></Chrono>
    </div>
  </div>
</div>

方法二：用自定义CSS类覆盖组件默认样式 #

如果你更喜欢用Tailwind或自定义CSS管理样式，可以给Chrono加个专属className，针对性修改：

// JSX部分
<Chrono 
  mode="VERTICAL" 
  items={items}
  className="custom-chrono-container"
></Chrono>

// CSS（用Tailwind的话可以加在@layer utilities里，或者直接写全局样式）
.custom-chrono-container {
  width: 80% !important; /* 用!important强制覆盖组件默认样式 */
  margin: 0 auto; /* 可选：让时间线在父容器中居中 */
}

注：react-chrono的根元素默认类名是react-chrono，但用自定义className更安全，不会影响页面中其他Chrono实例。

2. 缩小时间线卡片的尺寸 #

卡片的调整可以灵活选择组件内置props、自定义卡片内容，或是直接覆盖默认CSS：

方法一：用组件内置props快速调整 #

react-chrono提供了itemWidth（控制卡片宽度）和cardHeight（控制卡片高度）的props，直接设置数值即可：

<Chrono 
  mode="VERTICAL" 
  items={items}
  style={{ width: '80%' }}
  itemWidth={300} // 自定义卡片宽度，单位px
  cardHeight={150} // 自定义卡片高度，单位px
></Chrono>

方法二：自定义卡片内容（精细控制） #

如果想要调整卡片内边距、字体大小等细节，可以用renderItem props完全自定义卡片结构：

const renderCustomCard = (item) => {
  return (
    <div className="p-2 w-64 h-32 bg-white rounded-lg shadow-sm"> {/* 用Tailwind类自定义尺寸和样式 */}
      <h3 className="text-sm font-semibold">{item.title}</h3>
      <p className="text-xs mt-1 text-gray-600">{item.content}</p>
    </div>
  );
};

// 在Chrono中使用自定义卡片
<Chrono 
  mode="VERTICAL" 
  items={items}
  style={{ width: '80%' }}
  renderItem={renderCustomCard}
></Chrono>

方法三：覆盖默认卡片CSS类 #

如果不想重构卡片结构，直接针对组件默认的卡片类修改：

/* 组件默认卡片类为`chrono-card`，结合自定义容器类精准定位 */
.custom-chrono-container .chrono-card {
  width: 280px !important;
  padding: 0.8rem !important; /* 缩小内边距来进一步减小卡片视觉尺寸 */
}

额外提示：Tailwind优先级问题 #

如果你用Tailwind，组件自带的内联样式可能会压过Tailwind类，这时候可以用Tailwind的!前缀（比如!w-4/5）或者CSS的!important来强制生效。

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