react datepicker custom css styling

Question

i have 2 react datepicker in the project

Have the custom styling like below in the css file

.react-datepicker-wrapper,
.react-datepicker__input-container,
.react-datepicker__input-container input {
    display: block;
    width: 250px;
    margin-right: 13px;
    margin-left: 3px;
}

right now it is applying for both datepickers... but I need the above styling only for 1 datepicker, it shouldn't effect the other datepicker

is there a way to do that?

score 1 · Accepted Answer · answered Jan 12 '21 at 06:53

You need to wrap it with a custom class name, otherwise it will affect the original class of react-datepicker .

Try this:

.myCustomDate-1 {
  .react-datepicker-wrapper,
  .react-datepicker__input-container,
  .react-datepicker__input-container input {
      display: block;
      width: 250px;
      margin-right: 13px;
      margin-left: 3px;
  }
}

( P.S. Don't forget that your date picker element needs to add class name "myCustomData-1" . )

react datepicker custom css styling

1 Answers1