https://github.com/jcoreio/material-ui-render-props-styles

render props component wrapper for Material UI withStyles HoC
https://github.com/jcoreio/material-ui-render-props-styles

Last synced: 8 months ago
JSON representation

render props component wrapper for Material UI withStyles HoC

• Host: GitHub
• URL: https://github.com/jcoreio/material-ui-render-props-styles
• Owner: jcoreio
• License: mit
• Created: 2018-05-06T19:42:07.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T18:30:38.000Z (over 3 years ago)
• Last Synced: 2025-07-31T04:38:55.248Z (11 months ago)
• Language: JavaScript
• Size: 4.43 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# material-ui-render-props-styles

[![CircleCI](https://circleci.com/gh/jcoreio/material-ui-render-props-styles.svg?style=svg)](https://circleci.com/gh/jcoreio/material-ui-render-props-styles)

[![Coverage Status](https://codecov.io/gh/jcoreio/material-ui-render-props-styles/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/material-ui-render-props-styles)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![npm version](https://badge.fury.io/js/react-library-skeleton.svg)](https://badge.fury.io/js/react-library-skeleton)

[Render props](https://reactjs.org/docs/render-props.html) component wrapper for Material UI [`withStyles`](https://material-ui-next.com/customization/css-in-js/#withstyles-styles-options-higher-order-component) HoC

## Usage

```sh

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 https://github.com/facebook/create-react-app/pull/5005 lands (hopefully).

```js

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}) => (

  

    {({classes}) => (

      


        {children}

      

    )}

  

)

```


## 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 :cry:

## 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