React-router: Enable Radium hover styles on <Link/>

Created on 18 Jul 2015  路  2Comments  路  Source: ReactTraining/react-router

Hi!

I noticed that I can't apply Radium hover styles on a link element, as the <Link /> component doesn't seem to be Radium-aware enough. When I apply a Radium style and inspect the <a> element, the ':hover' key is inlined in the style prop and the styles just show up as our old friend [object Object].

I realise that, due to react-router being at the center of apps and the countless other React libraries people use, accommodating everything is very difficult. If you do not want to implement some kind of Radium fix, I totally understand. However, Radium is a very convenient way to add hover styles, which are crucial for links. Especially if it's already in your stack.

Thanks!

Most helpful comment

I don't think there's much react-router can or should do about that. From what I can tell, in order to make <Link> radium-aware, it would need to become a dependency and affect all users, whether they use radium or not.

Also, it seems like you can just do

import {Link} from 'react-router';
import Radium from 'radium';

var RadiumLink = Radium(Link);

All 2 comments

I don't think there's much react-router can or should do about that. From what I can tell, in order to make <Link> radium-aware, it would need to become a dependency and affect all users, whether they use radium or not.

Also, it seems like you can just do

import {Link} from 'react-router';
import Radium from 'radium';

var RadiumLink = Radium(Link);

Oh, nice! I tried something like that, but it didn't work. I'll try this now. Thanks!

Was this page helpful?
0 / 5 - 0 ratings