Search code examples
reactjsreact-dates

CSS Styling with react-dates

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.

Solution

  • 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;
}