How to Change Date Picker height of material ui-CodePudding

I am using mui date picker and i want to customize it but css is not working on it i tried inline style as well as external styling by giving className but it dosent work 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)}
/>

CodePudding user response：

use an other type of date picker instead. for example StaticDatePicker for large height data picker

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

CodePudding user response：

You have to apply the style by using the sx property in the <TextField> component and target the element with class .MuiInputBase-input.

Below is the code you need and here is the codesandbox to play with.

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