使用Shadcn的Calendar组件，如何让其占据网站页面的一半？

问题分析 #

Shadcn的Calendar基于@radix-ui/react-calendar实现，默认自带固定宽高样式，直接给组件添加h-full w-full类会被默认样式覆盖，导致无法继承父容器的尺寸。

可行解决方案 #

方案1：强制覆盖组件样式 #

通过style属性直接设置宽高，优先级高于类样式：

import { Calendar } from '@/components/ui/calendar'
import React from 'react'

export default function Home() {
  return (
    <div className='w-full px-8'>
      <div className='flex gap-x-2'>
          <div className='flex-1 h-[650px] bg-blue-200'>
            <Calendar 
              className='h-full w-full'
              style={{ width: '100%', height: '100%' }}
            />
          </div>
          <div className='flex-1'>2</div>
      </div>
    </div>
  )
}

方案2：修改Calendar组件的默认样式 #

如果需要全局生效，直接修改@/components/ui/calendar.tsx中的根元素样式，移除固定宽高并设置为自适应：

// 找到CalendarRoot的样式定义
const CalendarRoot = styled(RadixCalendar.Root, {
  // 移除原有的width: 350、height: 400等固定值
  width: '100%',
  height: '100%',
  // 保留其他原有样式
})

方案3：使用Tailwind优先级前缀 #

利用Tailwind的!前缀提升样式优先级，强制覆盖默认样式：

<Calendar className='!h-full !w-full' />

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