material-uimui-x-date-picker

How to change MUI v6 DatePicker text field to standard variant

My current code

 <DatePicker
              label="End Day"
              inputFormat="MM/DD/YYYY"
              value={activityEndTime}
              onChange={updateEndTime}
              sx={{
                width: "10rem",
              }}
            />

here is how it looks like

enter image description here

how i want it to look like (i just want an underline, not a full rectangle outline)

enter image description here

any help would be much appreciated

Solution

  • The desired result can achieved by adding a slotProps property:

    <DatePicker
              label="End Day"
              inputFormat="MM/DD/YYYY"
              value={activityEndTime}
              onChange={updateEndTime}
              sx={{
                width: "10rem",
              }}
              slotProps={{ textField: { variant: "standard" } }}
 />