Radium: Can't style react-router Link's

[pocketjoso]

import React from 'react';
import Radium from 'radium';
import { Link } from 'react-router';
...
render() {
  return <Link to={ '/' } style={[ { color: 'red' } ]}>Test</Link>
}
...
module.exports = Radium(MyComponent);

Result is <a style="0:[object Object];">, seems like Radium isn't able to execute the style processing on the element. Is this a known issue, or am I doing something wrong? Haven't seen this problem styling any other react element.

[exogen]

Hi Jonas! Check out Ian's response in #249, where he describes the decision about handling the style prop on custom components (like Link), and a possible workaround.

Seems like a good time to add this to the FAQ, I'll open an issue to do that. Feel free to re-open this if you have any issues!

[pocketjoso]

Thanks for quick reply @exogen, that partially solved my issue - however :hover still doesn't work with that change. Is there a workaround for that too?

[ianobermiller]

There is no workaround at the moment, but we could add some sort of sentinel that tells radium to process the style even though it is a custom component, like style={Radium.include([style1, style2])}.

[ianobermiller]

There is no workaround at the moment, but we could add some sort of sentinel that tells Radium to process the style even though it is a custom component, like style={Radium.include([style1, style2])}.

Keep in mind that the custom component will also have to pass along the event handlers (onMouseEnter, etc) for Radium to work correctly. Probably best if the component does {...this.props} inside.

[toddw]

A very usable work-around was posted here: https://github.com/rackt/react-router/issues/1568

[ianobermiller]

Ah yes, this is documented in the FAQ: https://github.com/FormidableLabs/radium/tree/master/docs/faq#why-doesnt-radium-work-on-somecomponent

[cbartram]

React Routers links just wrap the element in an <a> anchor element. You should be able to target it with css with a { font-size: 30px } Right?

[kidandcat]

What happens to people who use inline styles? not be able to style a component is a hard restriction, I always inherit style prop into my component's container