withStyle access to component props

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Is the currently an api to accessing the component props from the style like styled-components? say something like this:

const styles = (theme, props) => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        backgroundImage: `url("${props.url}")`,
        backgroundColor: props.color? props.color : theme.pallete.primary.main
    }
})

const Hero = ({classes, title}) => <div className={classes.root}>{title}</div>

export default withStyle(styles)(Hero)

Current Behavior

I’m currently using inline styling

Example

const styles = (theme, props) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    }
})
const genStyle = (url, color='blue') => ({
    backgroundColor: color,
    backgroundImage: `url("${url}")`
})

const Hero = ({classes, title, url, color}) => (
    <div className={classes.root} style={genStyle(url, color)}>
        {title}
    </div>
)

export default withStyle(styles)(Hero)

Context

Generate styles based on the props of the component like determining theme, passing in background colors etc.

[oliviertassinari]

@mfoncho The issue is still open. It’s one of my top priorities. I also want to look into emotion at the same time, see if we can leverage it.

[mfoncho]

@JacquesBonet not so much of a library is needed to implement the required feature but just a simple like this StyledPropsHOC