reactjsmui-x-date-picker

Cannot vertically center label in MUI DateTimePicker


I am using DateTimePicker from @mui/x-date-pickers, Why died the label not display vertically centered? I am using size small and fontsize 13.

enter image description here

slotProps: {
  textField: {
    fullWidth: true,
    variant: 'outlined',
    size: 'small',
    required,
    disabled,
    style: {
      ...style,
      fontSize: '13px',
    },
    InputProps: {
      style: {
        fontSize: '13px',
      },
      sx: {
        '&.Mui-disabled': {
          color: '#777777',
          WebkitTextFillColor: '#777777',
        },
      },
    },
    InputLabelProps: {
      style: {
        fontSize: '13px',
      },
    }}

Solution

  • I overrided transform in InputLabelProps of my DateTimePicker and it fixed problem.

    InputLabelProps: {
      style: {
        fontSize: '13px',
      },
      sx: {
        transform: 'translate(12px, 10px) scale(1) !important',
      },
    },