Radium: How to use hover in Style component?

Created on 7 Jan 2017  路  4Comments  路  Source: FormidableLabs/radium

Like title says I want to know if I can use hover in Style component? If so can you tell me how I can do that.

picture alphiii

Most helpful comment

Here's an example of the workaround that I used (the two Style components):

render(){

return (

  <div className="panel">
    <h1>{this.props.panel.title}</h1>
    <img src={this.props.panel.imgSrc} />
    <ul>
      {this.props.panel.listItems.map((listItem, i) => <li key={i}>{listItem}</li>)}
    </ul>
    <p>{this.props.panel.textContents}</p>

    <Style
      scopeSelector=".panel"
      rules={{
        'display': 'block',
        'max-width': '500px',
        'padding': '0px auto',
        'background-color': 'rgba(225, 190, 231, 1)',
        'border': '1px solid #7B1FA2',
        'border-radius': '15px',
      }}
    />

    <Style
      scopeSelector=".panel:hover"
      rules={{
        "transform": "scale(1.1)"
      }}

      />

  </div>

)
picture caj-johnson on 11 Jan 2017
👍3 🚀1 ❤1

All 4 comments

Hi alphiii,

There's an example in the readme, see https://github.com/FormidableLabs/radium.

I did run into one situation when working with radium, where the :hover was applied to all children as well. As a workaround, you can create another