MUI StaticDatePicker整体宽度调整问题：无法缩小至256px

你已经调整了内部子组件的尺寸，但整体宽度被外层容器限制在320px，需要补充调整根容器和布局容器的宽度：

1. 直接设置组件根宽度作为基准
2. 让内部核心容器继承父容器宽度，打破固定宽度限制
3. 替换动态生成的CSS类为官方类名，保证样式稳定性

修改后的代码如下：

<Field
  as={StaticDatePicker}
  id='booking_date'
  name='booking_date'
  label='Booking Date'
  value={initialValues.booking_date} 
  autoFocus
  sx={{
     width: 256, // 直接定义组件整体宽度基准
     "& .MuiPickersCalendarHeader-root": {
          width: "100%", // 改为跟随父容器宽度
     },
     "& .MuiIconButton-root": {
          width: 32,
     },
     "& .MuiTypography-caption": {
          width: 32,
          fontSize: "0.7rem" // 将动态类的样式合并到官方类中
     },
     "& .MuiPickersDay-root": {
          width: 32,
          height: 32
     },
     "& .MuiYearCalendar-root": {
          width: "100%" // 跟随父容器宽度
     },                        
     "& .MuiDatePickerToolbar-title": {
          fontSize: "1.7rem"
     },
     "& .MuiPickersLayout-root": {
          width: "100%" // 布局容器占满根宽度
     },
     "& .MuiCalendarPicker-root": {
          width: "100%" // 日历容器占满父容器
     },
     backgroundColor: theme.palette.primary.main
  }}
  onChange={(newValue) => setFieldValue('booking_date', newValue)}/>

关键调整说明：

• 给组件自身设置width:256，直接锁定整体宽度
• 将之前固定宽度的页眉、年份日历改为100%，避免和根容器宽度冲突
• 补充布局容器和日历容器的宽度设置，确保内部所有元素都适配根容器尺寸
• 移除依赖动态生成类的样式，合并到官方类名下，避免后续样式失效

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