Default theme is clobbered by parent theme

[Justin Schrader]

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.

[Justin Schrader]

Turns out using the decorator is the problem...

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

works!

Should the readme be updated perhaps?

[Javi Velasco]

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

[Justin Schrader]

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

[Javi Velasco]

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