Theme css is overridden by default css about react-css-themr HOT 6 CLOSED

Check the order of imports in the file where you render ThemeProvider. This common error happens because if you import App component which imports Button component after importing './theme-b/SuccessButton.scss' then default Button style will override styles from context. This is an expected behavior.

If the order is ok then please provide more info or please make a complete gist.

from react-css-themr.

Well, i'm not importing the App/Button at all, im using it as a children prop:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'react-css-themr';

import { theme as whiteTheme } from '../../theme/whiteTheme/index';

const currentTheme = { ...whiteTheme };

export default class App extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  };

  render() {
    return (
      <ThemeProvider theme={currentTheme}>
        <div>
          {this.props.children}
        </div>
      </ThemeProvider>
    );
  }
}

For this example, white theme is the style that should override the components' css

from react-css-themr.

@idangozlan What is the order of imports of both App and Button in host component? Could you please provide a minimal representational gist/repo? The problem is no doubt in the order of imports but the info provided is not enough to find the place of this error.

from react-css-themr.

Finally, it was happen because i've used the ThemeProvider by wrapping <App> component (according to the Readme.md), but since it's complex and isomorphic app, I had to define it one my client.js file and my server.js files, specific to my project, those files contains the rendering of the react-dom.

from react-css-themr.

@idangozlan I am having the same issue. Can you post your solution?

from react-css-themr.

I had to import part of the scss from routes files ( or route point), you can try also from the root App component, but it was important to do the import on the very first part of your app.

from react-css-themr.