react-native
第一种:在标签内部使用样式
import React from 'react'; class Demo extends React.Component{ render(){ return( <div> <div style={{ width:'100px', height:'80px', backgroundColor:'red', fontSize:'24px', textAlign:'center' }} >Demo!</div> ); } }
export default Demo;
2、将style看做一个对象,然后进行引入
import React from 'react'; class Demo extends React.Component{ render(){ let mystyle={ width:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' } return( <div> <div style={mystyle}>This is Page1!</div> </div> ); } } export default Demo;
3、外部引入css文件
#mydiv{ width:200px; height:80px; background-color:yellow; font-size:24px; text-align:center }
import React from 'react'; require('./style.css'); class Demo extends React.Component{ render(){ return( <div> <div id='mydiv'>This is Page1!</div> </div> ); } } export default Demo;