Changing the Material UI's DatePicker's border color-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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