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.

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