reactjs 如何更改日期选取器的材质UI高度

xxls0lw8  于 2023-03-29  发布在  React
关注(0)|答案(3)|浏览(137)

我正在使用多个日期选择器,我想自定义它,但css是不是它的工作,我尝试了内联风格以及外部样式通过给className,但它dosent工作I want to change its height

<DatePicker
            sx={{height:'35px'}} //its not working!!
            label="Due Date"
            className="DatePicker"
            renderInput={(params) => <TextField {...params} />}
            value={selectedDate}
            onChange={(newValue) => setSelectedDate(newValue)}
/>
lpwwtiir

lpwwtiir1#

您必须通过使用<TextField>组件中的sx属性来应用样式,并将类.MuiInputBase-input作为元素的目标。
下面是你需要的代码,这里是codesandbox

<DateTimePicker
      label="Due Date"
      className="DatePicker"
      renderInput={(params) => (
        <TextField
          sx={{
            "& .MuiInputBase-input": {
              height: "80px" // Set your height here.
            }
          }}
          {...params}
        />
      )}
      value={selectedDate}
      onChange={(newValue) => setSelectedDate(newValue)}
    />
sqougxex

sqougxex2#

使用一个其他类型的日期选择器代替.例如StaticDatePicker为大高度数据选择器

<StaticDatePicker
  value={selectedDate}
  onChange={(newValue) => {
  setSelectedDate(newValue);
  }}
  renderInput={(params) => <TextField {...params} />}
/>
nc1teljy

nc1teljy3#

我使用新的@mui/x-date-pickers将大小从中等更改为小型时也遇到了类似的情况。
我必须使用DatePicker组件的slotProps,如下所示:

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker slotProps={{ textField: { size: 'small' } }} />
</LocalizationProvider>

Check the doc.

相关问题