如何让MUI X TimePicker弹出层匹配父FormControl的全宽？

可以通过MUI X的slotProps属性直接定制弹出层（Popper）和时间选择器（Clock）的样式，无需额外定位包装器，具体方案如下：

完整代码示例 #

<FormControl fullWidth>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <TimePicker
      views={["hours", "minutes", "seconds"]}
      label={t("StrategyManager.Select_Time")}
      value={timer}
      onChange={(selectedTime) => handleTimeSelection(selectedTime, "timer")}
      ampm={false}
      slotProps={{
        // 定制弹出层Popper的样式
        popper: {
          sx: {
            width: "100%",
            '& .MuiPaper-root': {
              width: '100%',
              maxWidth: 'none', // 移除默认最大宽度限制
            }
          }
        },
        // 定制时间时钟Clock的样式
        clock: {
          sx: {
            display: 'flex',
            width: '100%',
            // 让小时/分钟/秒的容器均分宽度
            '& .MuiTimeClock-viewWrapper': {
              flex: 1,
              // 可选：调整内部数字大小，避免宽度过窄时溢出
              '& .MuiClockNumber-root': {
                fontSize: '1rem'
              }
            }
          }
        }
      }}
    />
  </LocalizationProvider>
</FormControl>

样式说明 #

1. 弹出层铺满FormControl宽度

   • 通过slotProps.popper.sx设置Popper容器宽度为100%，同时修改内部的MuiPaper-root组件宽度为100%并取消maxWidth限制，确保弹出层完全适配父级FormControl的宽度。

2. 时分秒列宽度相等

   • 给clock组件设置flex布局，然后给每个时间视图的容器MuiTimeClock-viewWrapper添加flex:1属性，三个容器会自动均分整个时钟区域的宽度。
   • 可选调整MuiClockNumber-root的字体大小，避免窄宽度下数字溢出。

如果需要更精细的样式控制，也可以通过MUI的styled函数对TimePicker组件进行封装，但slotProps是MUI X推荐的组件内部样式定制方式，更简洁直接。

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