Ivan Ivan - 3 months ago 40
Javascript Question

Styling a link on hover - with Radium in React

I've been looking for an answer here and in the documentation, but I can't seem to find it. Here's the Radium documentation.

I'd like to know if there's a way to style links in React? Specifically a, a:hover, a:visited etc.

Example:

var React = require("react");
var Radium = require('radium');
var Link = require('react-router').Link

var Header = React.createClass({
render: function(){

var styles={
links: {
":hover": {color: "red", textDecoration: "none"}
}
}

return(
<div style={[styles.links]}>
<Link to="/photos">Photos</Link>
</div>
);
}
});

module.exports = Radium(Header);

Answer

You can't do anything with React's style property that you can't do with standard HTML inline styles. This includes using CSS pseudo classes.

Instead, assign a class to your React component via the className property and apply the styles to this class in a CSS style-sheet:

return(     
    <div className="my-link">
        <Link to="/photos">Photos</Link>
    </div>
);
Comments