如何在 TimePicker 组件中设置高度、宽度和边框半径 - MUI React

Question

我试图更改 TimePicker 中输入的一些属性，例如高度、宽度和边框半径，但没有成功。有谁知道如何使用 sx 或 slotProps 更改它？这是我当前的代码。

<TimePicker
          ampm={false}
          views={['hours', 'minutes', 'seconds']}
          sx={{
            backgroundColor: "#333335",
            font: "white",
            color: "#FFFF",
            textDecoration: "bold",
            input: {
              color: "#FFFF",
              fontSize: "1.4rem",
            },
              "& .MuiTimePicker-root": {
              backgroundColor: "#222223",
            },
            "& .MuiTimePicker-input": {
              color: "#FFFF",
              fontSize: "1.2rem",
            },
          }}
          slotProps={{
            popper: {
              sx: {
                "& .MuiList-root": {
                  backgroundColor: "#333335",
                },
                "& .MuiMenuItem-root": {
                  "&.Mui-selected": {
                    backgroundColor: "#04395E",
                    color: "white"
                  },
                  color: "white"
                },
                "& .MuiDialogActions-root": {
                  backgroundColor: "#333335",
                },
                "& .MuiSvgIcon-root": {
                  "&.MuiSvgIcon-fontSizeMedium": {
                    backgroundColor: "#04395E",
                    color: "white"
                  },
                  color: "white"
                },
              },
            },
          }}
          value={selectedTime}
          onChange={(newTime: any) => setSelectedTime(newTime)}
          timeSteps={{hours: 1, minutes: 1, seconds: 1}}
/>

Answer 1

您需要在

textfield

内自定义

slotProps

来编辑高度、宽度和边框半径。你可以检查下面的代码👇

import OutlinedInputClasses from '@mui/material/OutlinedInput/outlinedInputClasses'

<TimePicker
  label="Basic time picker"
  slotProps={{
    textField: {
      sx: {
        borderRadius: 6,
        fieldset: { borderRadius: 6 },
      /* Use FilledInputClasses if your TextField variant changed to "filled" otherwise use below */
      [`.${OutlinedInputClasses.root}`]: {
         height: 80,
         width: 300,
      },
      /* If you change the default height, you need to adjust the Input Label position as well */
      '& .MuiInputLabel-root': { lineHeight: 3 },
     },
    },
  }}
/>

⭐ 注意：确保

borderRadius

和

fieldset: {borderRadius: _}

具有相同的值。

希望有帮助。