How to make the calendar component occupy the entire screen

[Jackwew]

How to make the calendar component occupy the entire screen

Code

import { DayPicker } from "react-day-picker";

<DayPicker
	mode="single"
	locale={zhCN}
	defaultMonth={selected}
	disabled={beforeMatcher}
	startMonth={dayjs().set('year', 2015).set('month', 0).toDate()}
	endMonth={new Date()}
	selected={selected}
	onSelect={setSelected}
	footer={
		selected ? (
			<div className="flex justify-between items-center px-4">
				<div>选择的日期：{selected.toLocaleDateString()}</div>
				<div
					className="px-8 bg-[#1471E3] text-white py-2 rounded-2xl"
					onClick={() => {
						change?.(dateType, selected)
						setPopupOpen(false)
					}}
				>
					确认
				</div>
			</div>
		) : (
			<div>请选择日期</div>
		)
	}
	classNames={{
		today: `text-[#1471E3]`, // Add a border to today's date
		selected: `bg-[#1471E3] border-[#1471E3] text-white rounded-2xl`, // Highlight the selected day
		root: `${defaultClassNames.root} shadow-lg p-5`, // Add a shadow to the root element
		chevron: `${defaultClassNames.chevron} fill-[#1471E3]`, // Change the color of the chevron
	}}
/>

Expected Behavior

I hope to be able to set the width of the calendar component, and I can control the style of the entire component (such as width, position, etc.) through CSS

Actual Behavior

At present, the overall width of the component is fixed, and the position of the component is not centered based on the box display

Screenshots

[laneschmidt]

Any ideas on this one? Tried everything but only managed to centre it within its parent:

[Sayyat]

		styles={{
			root: {width: '100%'},
			month_grid: {width: '100%'},
			months: {width: '100%', maxWidth: '100%'},
			month: {width: '100%', maxWidth: '100%'},
		}}
		
		
		use this