javascript - 在 React 中使用 Radium 设置悬停链接的样式

Question

我一直在此处和文档中寻找答案，但似乎找不到。这是Radium documentation .

我想知道是否有办法在 React 中设置链接样式？具体来说，a、a:hover、a:visited 等。

示例:

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 1

使用 React 的 style 属性无法执行标准 HTML 内联样式无法执行的任何操作。这包括使用 CSS 伪类。

相反，通过 className 属性为您的 React 组件分配一个类，并在 CSS 样式表中将样式应用到此类:

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