React(八)样式及CSS模块化
(1)内联样式
注:样式要采用驼峰命令发,如果非要使用原生css样式写法,需加引号
缺点:一些动画,伪类不能使用
class App extends Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { const styleCss = { header : { color: 'red', backgroundColor: '#ccc', "padding-top": '20px', paddingBottom: '20px' } } return ( <div className="App"> <p style={styleCss.header}>这是一段文字,哈哈</p> </div> ); } }
内联样式中的表达式:
class App extends Component { constructor () { super(); this.state = { minHeader: false }; }; switchHeader () { this.setState({ minHeader:!this.state.minHeader }) } render() { const styleCss = { header: { cursor: 'pointer', backgroundColor: 'red', color: '#fff', padding: (this.state.minHeader) ? '10px' : '30px' } }; return ( <div className="App"> <p style={styleCss.header} onClick={this.switchHeader.bind(this)}>这是一段文字,哈哈</p> </div> ); } }
(2)引入css文件
在该文件夹下使用import引入或者在index.html上面使用link引入
注:给html标签添加class属性需使用className
import './style/style.css' //创建的css文件 class App extends Component { render() { return ( <div> <p className="blueColor">这是一段文字,哈哈</p> </div> ); } }
(3)CSS模块化
安装依赖 style-loader、css-loader
babel-plugin-react-html-attrs(如果安装了这个插件,className 可以直接写成 class)
优点:
-
- 所有的样式都是local的,解决了命名冲突和全局污染的问题
- class名生成规则灵活,可以此来压缩class名
- 只需引入组件的JS就能搞定组件的所有JS和CSS
npm install style-loader css-loader babel-plugin-react-html-attrs --save
render() { var colorCss = require('./style/style.css') return ( <div className="App"> <p className={colorCss.blueColor}></p> <p >这是一段文字,哈哈</p> </div> ); }
(4)JSX样式与Css样式互转(内联样式模式)
在线转换工具:https://staxmanade.com/CssToReact/
render() { const styleCss = { header : { color: 'red', backgroundColor: '#ccc', "padding-top": '20px', paddingBottom: '20px' } } return ( <div className="App"> <p style={styleCss.header}>这是一段文字,哈哈</p> </div> ); }