Changing the Material UI's DatePicker's border color

user_14900449 0
Viewed 104

enter image description here

This is my DatePicker from material UI, the only thing I want is to change borderColor. I've tried classes, changing the theme's primary color, using WithStyles.. Nothing seems to work.

material-ui reactjs javascript
2 Answers

The className prop is not applied to the MUI DatePicker component currently. There is an open issue on GitHub for this bug.

Alternatively, you can pass className prop to renderInput prop like:

<DatePicker
    label="Birthdate"
    defaultValue={new Date()}
    renderInput={(params) => (
      <TextField {...params} className="myDatePicker" />
    )}
/>

and apply the css on fieldset tag like:

.myDatePicker fieldset.MuiOutlinedInput-notchedOutline {
  border-color: green;
}

.myDatePicker .Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
  border-color: red;
}

You can take a look at this sandbox for a live working example of this usage.

user_73994780

Here is a way to customise the default, hover and active styling for the border color. You can also do the same using styled components. Here is a working codesandbox.

<DatePicker
        label="Birthdate"
        defaultValue={new Date()}
        renderInput={(params) => (
          <TextField
            {...params}
            sx={{
              '& .MuiOutlinedInput-root': {
                '& fieldset': {
                  borderColor: 'red',
                },
                '&:hover fieldset': {
                  borderColor: 'green',
                },
                '&.Mui-focused fieldset': {
                  borderColor: 'purple',
                },
              },
            }}
          />
        )}
      />
user_53764040
Related