Rheostat initialize creates a conflict with React-dates initialize

[castrolem]

If you install both packages they are unable to work, they seem to overwrite each other since v3.0.0 😞

...
"react-dates": "^16.7.0",
"rheostat": "^3.0.0",
...

[majapw]

@castrolem Ahhh thank you for bringing this to our attention. :X This is the usage we should have thought about (since it is our own) and added to the README when we release this major version. If you want to get both working, right now, the easiest way to do so is to do the following instead of importing the initialize script:

import 'rheostat/css/rheostat.css';
import 'react-dates/lib/css/_datepicker.css';

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import cssInterface from 'react-with-styles-interface-css';
import RheostatDefaultTheme from 'rheostat/lib/themes/DefaultTheme';
import ReactDatesDefaultTheme from 'react-dates/lib/theme/DefaultTheme';

ThemedStyleSheet.registerInterface(cssInterface);
ThemedStyleSheet.registerTheme({ 
  ...RheostatDefaultTheme,
  ...ReactDatesDefaultTheme,
});

I'll add this to the README (here and in react-dates) as well as the motivation behind moving to react-with-styles and dealing with these global themes and interfaces while we mull over how we can improve this process.

@ljharb @lencioni for thoughts on this as well.

[ljharb]

Maybe instead of having the defaults overwrite the theme, it should merge them, allowing the namespaces to prevent collisions?

[JamesDorrian]

@majapw can you provide the file path of the initialize to be changed?

[leviatan21]

In my case :

...
"react-dates": "^18.1.0",
"rheostat": "^v3.0.1",
...

Thanks for the "Fix"

[Ninos]

Is it possible to use react-with-styles for rheostat but NOT for react-dates? ATM I have theming conflicts because my styles get overwritten...

[jamesmosier]

Thanks for the great projects! I have a couple related questions, whenever you have a moment @majapw ...

1. Did the further explanation ever make it into the rheostat or react-dates README? I was hoping to learn more in order to answer my second question...
2. Is there a workaround that does not involve using react-with-styles?

I've been working on figuring out a way to properly merge theme objects in react-with-styles but can't quite find a good solution due to an equality check that fails because after the merge it's no longer the same object.

Thanks again 🎉

[WilliamDugdale]

I didn't like this solution, so I came up with the following

import Rheostat from 'rheostat';
import WithStylesContext from 'react-with-styles/lib/WithStylesContext';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'rheostat/lib/themes/DefaultTheme';

const RheostatWrapper = (props) => {
return (
    <WithStylesContext.Provider
      value={{
        stylesInterface: aphroditeInterface,
        stylesTheme: DefaultTheme,
      }} 
    >
      <Rheostat
         {...props}
      />
    </WithStylesContext.Provider>
  );
}

export default DatePickerStyleWrapper;

This would negate the current requirement to setup 'ThemedStyleSheet' for rheostat. Sadly this currently doesn't work for react-dates owing, I think, to a fairy simple oversight that I have brought up here: react-dates/react-dates#2029 Therefore this only half fixes the problem, but at least your rheostat component can be encapsulated.