如何调整Material UI StaticTimePicker组件的尺寸？

嘿，我懂你这种头疼的感觉——直接给StaticTimePicker加sx或者随便用slotProps确实可能没效果，毕竟这个组件是由好几个内部子组件拼起来的，得精准对准对应的插槽或者用点小技巧才行。我给你分享几个靠谱的方法：

方法一：用transform快速缩放整体尺寸 #

这是最直接的办法，通过transform: scale()来整体缩放组件，还可以用transformOrigin控制缩放的原点，避免组件位置跑偏。你可以直接把这个加到组件的sx属性里：

<StaticTimePicker
  value={values.time}
  onChange={(newValue) =>
    handleChange({ target: { name: 'time', value: newValue } })
  }
  orientation="landscape"
  defaultValue={dayjs(formattedDateTime)}
  sx={{ 
    transform: 'scale(0.8)', // 调整这个数值来改变大小，0.8就是缩小到80%
    transformOrigin: 'top left' // 可选，控制缩放的基准点
  }}
/>

方法二：通过slotProps精准控制内部组件 #

如果不想用缩放（担心字体模糊或者布局错位），可以针对StaticTimePicker的内部插槽单独调整样式，比如时钟面板、工具栏这些核心部分：

<StaticTimePicker
  value={values.time}
  onChange={(newValue) =>
    handleChange({ target: { name: 'time', value: newValue } })
  }
  orientation="landscape"
  defaultValue={dayjs(formattedDateTime)}
  slotProps={{
    // 调整时钟面板的尺寸
    clock: {
      sx: {
        width: 220,
        height: 220,
        '& .MuiClockNumber-root': { fontSize: '0.9rem' } // 同时调整时钟数字的大小
      }
    },
    // 调整顶部工具栏的字体大小
    toolbar: {
      sx: { fontSize: '0.9rem' }
    },
    // 调整输入框的样式（如果显示的话）
    input: {
      sx: { fontSize: '0.9rem' }
    }
  }}
/>

这种方式更精细，能分别控制每个部分的大小，不会出现整体缩放带来的副作用。

方法三：通过Theme自定义全局样式 #

如果你的项目里需要统一调整所有StaticTimePicker的尺寸，可以在MUI的Theme里修改相关配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiStaticTimePicker: {
      styleOverrides: {
        root: {
          transform: 'scale(0.85)',
          transformOrigin: 'top left'
        }
      }
    }
  }
});

// 然后用ThemeProvider包裹你的组件
<ThemeProvider theme={theme}>
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    {/* 你的StaticTimePicker代码 */}
  </LocalizationProvider>
</ThemeProvider>

之前你用sx没生效，大概率是因为直接给根组件加width/height，被内部子组件的默认固定尺寸覆盖了，所以得用上面这些针对性的方式来调整~

备注：内容来源于stack exchange，提问作者Manali Shah