如何修改shadcn Calendar组件字体大小？月标题字体无法更改求助

你当前的代码没有针对**月标题（如August 2024）**的DOM节点配置自定义样式，这是无法修改它的核心原因。shadcn的Calendar组件基于DayPicker，月标题对应的是caption容器和caption_label文本标签，需要在classNames属性中显式配置这两个字段。

修正后的代码 #

<div className="flex-1 h-[500px] w-full my-4">
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    onDayClick={(date) => {
      console.log("Day Clicked", date);
    }}
    className="rounded-md border w-full h-full flex"
    classNames={{
      months:
        "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
      month: "space-y-4 w-full flex flex-col",
      table: "w-full h-full border-collapse space-y-1",
      head_row: "",
      row: "w-full mt-2 bg-transparent",
      day: "text-lg w-16 h-16 rounded-sm",
      // 添加月标题相关样式配置
      caption: "mb-4", // 可选：调整标题与下方日历的间距
      caption_label: "text-xl font-semibold", // 设置月标题的字体大小和粗细
    }}
  />
</div>

额外注意事项 #

• 如果自定义样式被默认样式覆盖，可以在类名前加!提升优先级，比如!text-xl
• 若使用Tailwind，确保你的配置文件没有限制相关字体大小类的生成
• 可以通过浏览器开发者工具（F12）定位月标题的DOM节点，查看实际生效的类名，排查是否有其他样式冲突

效果对比 #

• 修改前：
• 预期效果：

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