search

FormidableLabs / radium

A toolchain for React component styling.
http://formidable.com/open-source/radium/
MIT License
7.39k stars 308 forks source link

Doesn't work with react-router IndexLink #829

Open ratiotile opened 8 years ago

ratiotile commented 8 years ago 
import {Link, IndexLink} from 'react-router'
export const RadiumLink = Radium(Link)
export const RadiumIndexLink = Radium(IndexLink)

Wrapping IndexLink with Radium doesn't allow it to handle radium styles like :active or arrays of styles. RadiumIndexLink will not apply style={[a, b]} arrays of styles or browser state styles, but RadiumLink will.

"radium": "^0.18.1"
"react-router": "^2.0.0"
niksajanjic commented 8 years ago

I second this with issue reported in #817.

That issue also has link to repo where it is possible to see the code (and GIF presentation) which reproduces this bug.

jordizle commented 7 years ago

IndexLink is just a wrapper around Link except parsing onlyActiveOnIndex={true} property as you can see here:

https://github.com/ReactTraining/react-router/blob/master/modules/IndexLink.js

So you can do:

<RadiumLink to={'/'} style={style.foo} onlyActiveOnIndex={true}>Home</RadiumLink>

Then the styles will work...