3

Hopefully a simple question with a simple answer, but how exactly do you use custom CSS to style react-date components? The docs on Github are about as clear as mud to me when it comes to CSS and seems to push users to use the theme method...which seems like a perfect way to make my project even more messy and confusing. I understand that I have to import react-dates/initialize and react-dates/lib/css/_datepicker.css, but importing my own CSS does not seem to affect the styling. I am using the default create-react-app setup for my application.

sp8n-4k
  • 51
  • 1
  • 5

1 Answers1

3

First you will need to include the libraries CSS and then include your custom CSS to override the libraries CSS.

require("libraries/style.css"); // Make sure to include this before your custom css
require("custom/style.css");

In your custom style.css file, you will need to override the styling rules from style.css like so.

.library-css-rule {
   color: #000;
}
Francis Malloch
  • 1,074
  • 9
  • 20
  • This is what I am doing, which is why I am confused – sp8n-4k Mar 05 '18 at 18:42
  • You will be able to see in the chrome inspector what styles are being applied to which elements, have a look in there to see if your styles are being applied and if they are not, are they being overridden? Are they even there? – Francis Malloch Mar 05 '18 at 19:10
  • Wow, I feel silly for not checking that earlier. The component had a lot of nested parts, turns out I was styling the wrong one. Thank you! – sp8n-4k Mar 05 '18 at 19:31