Search code examples
javascriptcssreactjsreact-datepicker

react datepicker custom css styling

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?

Solution

  • 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" . )