简体繁体 English

airbnb/react-dates 的不同样式类

[英]Different Styling Classes for airbnb/react-dates

原文 2018-07-12 00:20:41 3 1 css/ reactjs/ datepicker/ react-dates

I'm currently having the problem that I leverage the Airbnb dates in two different locations within my React project.我目前遇到的问题是我在 React 项目中的两个不同位置利用了 Airbnb 日期。 The dates are styled differently.日期的样式不同。 Therefore, I created 2 separate CSS files that overwrite the default styling.因此，我创建了 2 个单独的 CSS 文件来覆盖默认样式。

Even though, there are 2 different CSS files in 2 different locations the latest changes overwrite the initial styling changes.即使在 2 个不同的位置有 2 个不同的 CSS 文件，最新的更改也会覆盖最初的样式更改。 So for some reason, both datepickers share the same styling.所以出于某种原因，两个日期选择器共享相同的样式。

I want to mention that I use style-loaders.我想提一下我使用样式加载器。

Any ideas?有任何想法吗？

1 个解决方案

2020: 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.对于现在遇到这个问题并且也有这个问题的任何人，您可能已经尝试使用 CSS 模块，因为这将消除“全局 CSS”问题。

However, I tried that and it doesn't load CSS module files so that won't work at all.但是，我试过了，它不会加载 CSS 模块文件，因此根本不起作用。

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.每个 datepicker 都有自己的组件，我使用 styled-components 编写了一个基本容器，然后，每个 datepicker 的所有覆盖样式都进入该样式组件。

Boom, that solves the problem of the CSS styling clashing globally. Boom，解决了全局 CSS 样式冲突的问题。