javivelasco / react-css-themr

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

Invalid prop `theme` of type `string` supplied to `ThemedHeader`, expected `object`. #49

Closed JimmyLv closed 7 years ago

JimmyLv commented 7 years ago

I love this idea, but I got this error when following the README.md doc:

Warning: Failed prop type: Invalid prop `theme` of type `string` supplied to `ThemedHeader`, expected `object`.
    in ThemedHeader (created by App)
    in App
import defaultTheme from './Header.css'

@themr('ThemedHeader', defaultTheme)
class Header extends Component {
  render() {
    const { theme, logo, children } = this.props
    return (
      <div className={theme['header']}>
        { logo ? <i className={theme['icon']}>{logo}</i> : <Logo />}
        <Menu items={[1, 2, 3]} />
        <span>{children}</span>
      </div>
    )
  }
}

Error happened when pass theme as prop in parent component:

import styles from './App.css'

render() {
  <div>
    <Header theme={styles['header']}/>
  </div>
}
.header {
    background-color: darkgrey;
    padding: 5px;
    color: darkgreen;
}
raveclassic commented 7 years ago

@JimmyLv This is because styles is a css-module (just an object) and header is a string key with a string value of actual generated classname when theme should be an object, not string. Just try <Header theme={styles}/>.

JimmyLv commented 7 years ago

Thanks, sorry for the incorrect usage.🐒

On Mar 22, 2017, 7:49 PM +0800, Kirill Agalakov notifications@github.com, wrote:

@JimmyLv (https://github.com/JimmyLv) This is because styles is a css-module (just an object) and header is a string key with a string value of actual generated classname when theme should be an object, not string. Just try

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub (https://github.com/javivelasco/react-css-themr/issues/49#issuecomment-288375326), or mute the thread (https://github.com/notifications/unsubscribe-auth/AExBWscyihNLv8gukuPLkthAiRGDh5gkks5roQq5gaJpZM4MRO10).

javivelasco commented 7 years ago

Thanks @raveclassic