在React中使用Radium对悬停链接进行样式化

Styling a link on hover - with Radium in React

本文关键字：链接 样式 悬停 React Radium      更新时间：2023-09-26

我一直在这里和文档中寻找答案，但我似乎找不到它。这是镭的文档。

我想知道是否有一种方法来样式链接在React?特别是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);

你不能用React的style属性做任何你不能用标准HTML内联样式做的事情。这包括使用CSS伪类。

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

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

查看Radium的访问插件的使用:

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

您将组件包装在<StyleRoot>中然后像这样写你的样式:

myLink = {
  color: '#fff',
  ':visited': {
     color: 'purple'
  }
}
相关文章：