Radium ':Hover' not working

Question

In my first time implementing Radium, I am trying a simple ':hover'. Here is what I have ...

import React from 'react'
import Radium from 'radium'

@Radium
export default class ResSideNav extends React.Component {
  render() {
    const style = {
      navItem: {
        backgroundColor: '#2c80b8',

        ':hover': {
          backgroundColor: '#3A94CF'
        }
      }
    };

    return(
      // navItems defined elsewhere
      <div style={ style.navContainer }>
        {navItems.map((item, i) => <div key={ i } style={ style.navItem }>
                                    { item.name }</div>)}
      </div> 
    );
  }
};

I am getting no errors in server or console, there is just flat out no :hover state event. Webpack is giving me no errors as I have setup my .babelrc and Webpack Config File to read decorator syntax.

Just to be clear, there are other styles and elements at play, but this is a trimmed fat example. Thanks.

score 1 · Accepted Answer · answered Feb 08 '17 at 22:29

Just in case anyone comes across this ...

My issue was that babel still did not read the decorator operator in es6 even after installing babel-plugin-transform-decorators-legacy so instead I just:

class ResSidenav extends React.Component {
 // ...
export default Radium(ResSidenav);

not sure why this was not working ...

Radium ':Hover' not working

1 Answers1