material-ui-render-props-styles

Render props component wrapper for Material UI withStyles HoC

Usage

npm install --save material-ui-render-props-styles

If you are using Webpack or another bundler that supports the "module" field in package.json and building for legacy browsers, make sure to add a build rule to transpile this package.

If you are using create-react-app, you will need to import from material-ui-render-props-styles/index to prevent minification errors until facebook/create-react-app#5005 lands (hopefully).

import createStyled from 'material-ui-render-props-styles'

const styles = theme => {
  root: {
    backgroundColor: theme.palette.primary.light,
  },
}

// accepts same options as withStyles
const Styled = createStyled(styles)

const PrimaryDiv = ({children}) => (
  <Styled>
    {({classes}) => (
      <div className={classes.root}>
        {children}
      </div>
    )}
  </Styled>
)

Flow types

This package exports a Classes utility type that used to work with older versions of Flow. However, due to truly awful Flow bugs (which I spent hours trying to create a minimum repro case for, but failing) I'm unfortunately unable to offer useful Flow types at this time. I have tried everything 😢

Tips

Calling createStyled within your render function will cause problems, because that will create a new component class on each render. So make sure you call it outside of your render function.

The withTheme option is only necessary if you want your children function to receive the theme. If your styles is a theme => ({ }) function it will work even without the withTheme option. I have had this same confusion in the past about withStyles.

Props

children: (options: {classes: Object, theme: any}) => React.Node

The render function. It's passed the classes injected by JSS, and the theme injected by Material-UI (if withTheme is true), and should return the content to display.

classes?: {[className: string]: string}

Override class names for the inner component