Question

我一直在寻找这里和文档中的答案，但我似乎无法找到它。这是Radium documentation。

我想知道是否有办法在React中设置样式链接？特别是a，a：hover，a：visit etc.

示例：

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>
);

Answer 2

Check out the use of Radium's visited plugin:

https://github.com/FormidableLabs/radium/commit/87457d036c63312185d0148eb5b8a3cc48906e87

You wrap your component in <StyleRoot> and write your styles like so:

myLink = {
  color: '#fff',
  ':visited': {
     color: 'purple'
  }
}

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

2 个答案: