Radium: :hover style not working in combination with ReactRouter <Link />

[laurenskling]

Not sure who should be the one to fix this; but in my attempt to get Radium working i got stuck using :hover on my ReactRouter's component. The code is simple:

<Link style={styles.main} to="/">test</Link>

and:

var styles = {
    main: {
      backgroundColor: 'blue',
          ':hover': {
               backgroundColor: 'green' 
          }
    }
};

debugging i see this: style="background-color:blue;:hover:[object Object];"
So who's handling this wrong, Radium or React Router?

[laurenskling]

Just found something about this in the FAQ, so sorry!
https://github.com/FormidableLabs/radium/tree/master/docs/faq

[ianobermiller]

No worries, glad you found a solution!
On Mon, Oct 26, 2015 at 7:00 AM Laurens Kling [email protected]
wrote:

Just found something about this in the FAQ, so sorry!
https://github.com/FormidableLabs/radium/tree/master/docs/faq

—
Reply to this email directly or view it on GitHub
https://github.com/FormidableLabs/radium/issues/398#issuecomment-151142293
.

[nmaves]

Is there a workaround when using ES6?

[ianobermiller]

Works just fine using ES6 import syntax as well:

import {Link as ReactRouterLink} from 'react-router';
const Link = Radium(ReactRouterLink);