javivelasco / react-css-themr

Easy theming and composition for CSS Modules.
MIT License
591 stars 68 forks source link

Default theme is clobbered by parent theme #41

Closed icd2k3 closed 7 years ago

icd2k3 commented 7 years ago

I love the idea of this module, but I'm having some trouble getting default themes working with deep merging... For example:

Themed component:

  @themr('MyThemedComponent', styles)
  class ThemedComponent extends React.Component {
    render() {
      const { theme } = this.props;

      return (
         <div>
            <button className={theme.firstButton} />
            <button className={theme.secondButton} />
         </div>
      )
    }
  }

Default theme:

.firstButton { color: red; }
.secondButton { color: green; }

At this point, everything is working fine and my component is showing its default theme of 1 red button and 1 green. The problem arises when trying to merge styles from a parent component...

Parent:

<ThemedComponent theme={theme} />

Parent's theme:

.secondButton { color: yellow; }

Now the problem here is that the ONLY style that is included is .secondButton. The .firstButton class from the default theme is completely missing... Any ideas of why this might be happening or things I could look into? I'd be happy to post my webpack config if that would help as well.

icd2k3 commented 7 years ago

Turns out using the decorator is the problem...

export default themr('MyThemedComponent', styles)(ThemedComponent);

works!

Should the readme be updated perhaps?

javivelasco commented 7 years ago

Hi @icd2k3 !! What do you exactly miss? Can't see the issue in the former code

icd2k3 commented 7 years ago

Hey @javivelasco, thanks for the reply (and the module!). I believe the problem I was seeing was related only to using the @themr decorator.

I realized decorators are disabled in babel v6 so I installed this which allowed me to use decorators, BUT this is when the issue arose where the theme sent from the parent component would completely override any default theme set by the child...

Switching from using the @themr decorator to simply themr('MyThemedComponent', styles)(ThemedComponent); fixed the issue for me.

At any rate, it looks like the issue is with using decorators and not with themr itself. Not sure if it warrants a readme addition or not (depends if other people report this same issue or not I suppose).

javivelasco commented 7 years ago

Yeah, since they are deprecated it might be a good idea to change the docs to use it just as a funcion. Will do!