Search code examples
reactjsreact-dates

React-dates: Styling question to override inline styling

I want to make styling changes to react-dates, DateRangePicker.

enter image description here

I want to be able to give paddingBottom and on right as highlighted.

If I see in dev tools it shows me style is given inline so I cannot even override this change

enter image description here

some guidance is helpful..

Solution

  • We can use !important keyword to override the inline CSS. But we have to make sure we are maintaining a custom CSS file for that. In your case, 

    .DateRangePicker_picker{ 
   paddingBottom : 500px !important; 
  }

    This kind of CSS would be helpful. If you need to specify more about the particular element. You can use extra classes as well.

    .DateRangePicker_picker DateRangePicker_picker_1{ 
   paddingBottom : 500px !important; 
  }

    Either you can use the most unique CSS class. If not there will be some glitches in other pages if you are using the same component. Thanks!