dkorsakas
dkorsakas

Reputation: 177

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

Upvotes: 2

Views: 837

Answers (1)

dkorsakas
dkorsakas

Reputation: 177

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

Upvotes: 7

Related Questions