React：setting Styles+ Radium

setting Styles

直接更改JSX中的style object的内容；

style.backgroundColor="red";

adding Class

创建class array存放要条件加入的class；

const classes=[]; if(this.state.persons.length<=2){ classes.push('red'); //classes =['red'] } if(this.state.persons.length<=1){ classes.push('bold'); //classes =['red','bold'] }

join后放入JSX的className中；

<p className={classes.join(' ')}>It is working!</p>

inline style的限制：无法表示pseudo style

不能对button加入hover sytle；

pseudo selector css：

button:hover

第三方包——实现在JSX中调用pseudo selector

npm install --save radium import Radium from 'radium'; export default Radium(App);

radium实现pesudo style：hover

string类型作为pseudo对象的key

const style = { backgroundColor:'green', color:'white', font:'inherit', border:'1px solid blue', padding:'8px', cursor:'pointer', ':hover':{ backgroundColor:'lightgreen', color:'black' } };

style[’:hover’]对pesudo对象进行变化；

style.backgroundColor="red"; style[':hover']={ backgroundColor:'salmon', color:'black' }

Media quires

需要引入StyleRoot

import Radium,{StyleRoot} from 'radium';

将返回的JSX用StyleRoot包起来

<StyleRoot> <div className="App"> <h1>Hi i am a React App!</h1> <p className={classes.join(' ')}>It is working!</p> <button style={style} onClick={this.clicktoshow}>Switch Name</button> {person} </div> </StyleRoot>

media设置如下

import React from 'react'; import './Person.css'; import Radium from 'radium'; const person = (props)=>{ const style={ '@media(min-width:500px)':{ width: '450px' } }; return( <div className="Person" style={style}> <p>I Am a person!</p> <p onClick = {props.click}>{props.name}</p> <p>i'm {props.age}</p> <p>{props.children}</p> <input type="text" onChange={props.changed} value={props.name}/> </div> ) }; export default Radium(person);