withStyle access to component props

[2p4b]

• 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 It's a duplicate of #7633

[2p4b]

@oliviertassinari thanks for the reference thread, but after much talk about getting it into the 1.x is the api there? or should i have to write a HOC to wrap the withStyle HOC to get both props and theme? because #7633 was closed without a consensus on if the feature will be added or not. just trying not to reinvent the wheel here since withStyle already does some caching

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

[JacquesBonet]

You can use my library @mfoncho, it match what you like : https://github.com/JacquesBonet/jss-material-ui

[2p4b]

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