如何更改物料界面的日期选取器高度

Question

我正在使用mui日期选择器，我想自定义它，但css不起作用。我尝试了内联样式和外部样式，通过提供className，但它不起作用我想改变它的高度

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

Answer 1

我使用新的@mui/x-date-pickers将大小从中等更改为较小时也遇到了类似的情况。

我必须使用DatePicker组件的slotProps，如下所示：

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

检查文档。

Answer 2

您必须通过在<TextField>组件中使用sx属性来应用样式，并以类.MuiInputBase-input作为元素的目标。

下面是你需要的代码，这里是可以玩的代码沙盒。

<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)}
/>

Answer 3

使用其他类型的日期选择器。例如用于大高度数据选择器的StaticDatePicker

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