1.首先是样式引入,主要依赖的是babel的css-loader,这里是gitHub地址
很简单,只要在webpack.config.js中配置好
module.exports = { module: { rules: [ { test: /\.css$/,use: [ 'style-loader','css-loader' ] } ] } }
然后只要在文件中引入
import css from 'file.css';
当然,也可以使用其他的方式来编写样式,比如less,sass等等,方法也大致相同
顺便给几个git上的地址,方便使用 戳这里
2.另外再介绍一个方式,就是简单暴力一点,直接写在jsx的标签里面,就像这样
import React,{ Component } from 'react'; export default class MyApp extends Component { constructor(props) { super(props) } render() { return ( <div style={{marginTop: 10}}> </div> ) } }
当然,我们也可以定义一个变量,就像定义一个类一样,
import React,{ Component } from 'react'; export default class MyApp extends Component { constructor(props) { super(props) } render() { const styles = { padding: 0 } return ( <div style={{marginTop: 10}}> <div style={styles}> </div> <div style={styles}> </div> </div> ) } }
那么问题来了,如果个别样式不一样呢? 接下来就可以这样
import React,{ Component } from 'react'; export default class MyApp extends Component { constructor(props) { super(props) } render() { const styles = { padding: 0 } return ( <div style={{marginTop: 10}}> <div style={Object.assign({},styles,{paddingTop: 10})}> </div> <div style={styles}> </div> </div> ) } }
这个Object.assign是干嘛的捏,可以理解成是类之间的继承,这样解释应该比较好理解
但是还有一个问题,因为这个方法比较新,所以并不是所有浏览器都支持的,比如说ios9以下的浏览器
那么这里就推荐一个类库---Ramda
这是一个类似lodash的数据处理类库,个人感觉还是比较好用的,遗憾的是暂时好像没有中文文档,但是先将就看一下吧,那么接下来我们就可以这样
import React,{ Component } from 'react'; import R from 'ramda'; export default class MyApp extends Component { constructor(props) { super(props) } render() { const styles = { padding: 0 } return ( <div style={{marginTop: 10}}> <div style={R.merge(styles,{paddingTop: 10})}> </div> <div style={styles}> </div> </div> ) } }
ok,这样就世界和平了,
React 中写css的方法还有很多,但是以上两种算是最常见的啦,嘿嘿