Theme css is overridden by default css

[Idan Gozlan]

Hi,

I'm using this module with default css for component, and try to override it with theme css, but the default css is overriding the theme css:

// SuccessButton.js
import React, { Component } from 'react';
import { themr } from 'react-css-themr';
import * as successTheme from './SuccessButton.scss';

@themr('MySuccessButton', successTheme)
class Button extends Component {
  render() {
    const { theme, icon, children } = this.props;
    return (
      <button className={theme.button}>
        { icon ? <i className={theme.icon}>{icon}</i> : null}
        <span className={theme.content}>{children}</span>
      </button>
    )
  }
}

export default Button;

SuccessButton.scss the default component css

// App.js
import * as MySuccessButton from './theme-b/SuccessButton.scss';
...
const contextTheme = {
  MySuccessButton
};

const content = (
  <ThemeProvider theme={contextTheme}>
    <App />
  </ThemeProvider>
);

Chrome Inspector:

(Second css is the theme-b/SuccessButton.scss, which should be the first)

[Kirill Agalakov]

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.

[Idan Gozlan]

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

[Kirill Agalakov]

@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.

[Idan Gozlan]

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.

[Austin Heller]

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

[Idan Gozlan]

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.