import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
      
  <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DemoContainer components={['StaticTimePicker']}>
            <StaticTimePicker
              value={values.time}
              onChange={(newValue) =>
                handleChange({ target: { name: 'time', value: newValue } })
              }
              orientation="landscape"
              defaultValue={dayjs(formattedDateTime)}
            />
          </DemoContainer>
        </LocalizationProvider>

How to change the size of the StaticTimePicker?

I tried by adding sx prop and slotProps as well but it is not working.

import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
      
  <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DemoContainer components={['StaticTimePicker']}>
            <StaticTimePicker
              value={values.time}
              onChange={(newValue) =>
                handleChange({ target: { name: 'time', value: newValue } })
              }
              orientation="landscape"
              defaultValue={dayjs(formattedDateTime)}
            />
          </DemoContainer>
        </LocalizationProvider>

How to change the size of the StaticTimePicker?

I tried by adding sx prop and slotProps as well but it is not working.

• javascript
• reactjs

1 Answer 1

try this

<Box sx={{ width: "250px", height: "250px", "& .MuiClock-root": { transform: "scale(0.8)" } }}>
  <StaticTimePicker
    value={values.time}
    onChange={(newValue) =>
      handleChange({ target: { name: 'time', value: newValue } })
    }
    orientation="landscape"
    defaultValue={dayjs(formattedDateTime)}
  />
</Box>