Different Styling Classes for airbnb/react-dates

Question

I'm currently having the problem that I leverage the Airbnb dates in two different locations within my React project. The dates are styled differently. Therefore, I created 2 separate CSS files that overwrite the default styling.

Even though, there are 2 different CSS files in 2 different locations the latest changes overwrite the initial styling changes. So for some reason, both datepickers share the same styling.

I want to mention that I use style-loaders.

Any ideas?

Answer 1

2020:

For anyone who comes across this now and also has this issue, you may have tried to use CSS modules since that would eliminate the “global CSS” problem.

However, I tried that and it doesn't load CSS module files so that won't work at all.

However, I was able to solve it by using styled-components. Each datepicker had it own component and I used styled-components to write a base container and then, ALL the override styles for each datepicker goes into that styled component.

Boom, that solves the problem of the CSS styling clashing globally.