ホバー上のリンクのスタイリング - 反応したRadiumと

Question

私はこことそのドキュメントで答えを探していましたが、見つけられないようです。ここにはRadium documentationがあります。

Reactでリンクをスタイルする方法があるかどうかを知りたいですか？具体的には、：、ホバー：などを訪問しました

例：

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

あなたは標準のHTMLインラインスタイルで行うことができないのリアクトstyleプロパティで何もすることができません。これには、CSS疑似クラスの使用が含まれます。代わりに

、あなたのclassNameプロパティを経由してコンポーネントを反応させ、CSSスタイルシートでこのクラスにスタイルを適用するクラスを割り当てる：

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

Answer 2

ラジウムの訪問のプラグインの使用チェックアウト：

を

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

あなたは<StyleRoot> でコンポーネントをラップし、そのようなあなたのスタイルを記述します。

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