React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记
内联样式
-
在
render里定义./src/js/header.jsimport React from 'react'; export default class ComponentHeader extends React.Component { render() { const styleComponentHeader = { header: { backgroundColor: "#333333", color: "#FFFFFF", "padding-top": "15px", // 原始css属性需要用引号 paddingBottom: "15px" }, //还可以定义其他的样式 }; return ( <header style={styleComponentHeader.header}> <h1>这里是头部</h1> </header> ) } } -
引用外部css文件
./src/css/style.css.smallFontSize h1{ font-size: 12px; } .smallFontSizeFooter h1{ font-size: 14px; }./src/js/header.js,class改成classNameimport React from 'react'; export default class ComponentHeader extends React.Component { render() { return (<header className="smallFontSize"> <h1>这里是头部</h1> </header>) } }需要在
./index.html里引用css文件<!-- index.html --> <head> <link rel="stylesheet" href="./src/css/style.css" /> </head> <div id="example">123</div> <script src="./src/bundle.js"></script>
- 动画、伪类(
hover)不能用
内联样式中的表达式
-
state引起样式的即时变化./src/js/header.jsimport React from 'react'; export default class ComponentHeader extends React.Component { constructor(){ super(); this.state ={ miniHeader: false //默认加载的时候还是高（不是 mini）的头部 }; }; switchHeader(){ this.setState({ miniHeader: !this.state.miniHeader }); }; render() { const styleComponentHeader = { header: { backgroundColor: "#333333", color: "#FFFFFF","padding-top": (this.state.miniHeader) ? "3px" : "15px", paddingBottom: (this.state.miniHeader) ? "3px" : "15px"}, //还可以定义其他的样式 }; return ( <header style={styleComponentHeader.header} className="smallFontSize" onClick={this.switchHeader.bind(this)}> <h1>这里是头部</h1> </header> ) } }
CSS 模块化
-
非模块化缺点
- 全局污染
- 命名混乱
- 依赖管理不彻底
- 无法共享变量
- 代码压缩不彻底
-
CSS模块化插件 (npm安装)babel-plugin-react-html-attrs- 不需要将class改成className, 解决直接从其它项目copy css 样式使用style-loader-
css-loader-
在
webpack.config.js配置css-loader./webpack.config.jsvar debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname), devtool: debug ? "inline-sourcemap" : null, entry: "./src/js/index.js", module: { loaders: [ { test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['react', 'es2015'], plugins: ['react-html-attrs'], //添加组件的插件配置 } },//下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用 { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' },] }, output: { path: __dirname, filename: "./src/bundle.js" }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], };
-
-
CSS模块导入./src/css/footer.css.miniFooter{ background-color: #333333; color: #ffffff; padding-left: 20px; padding-top: 3px; padding-bottom: 3px; } .miniFooter h1{ font-size: 15px; }./src/js/footer.jsimport React from 'react';// css样式导入 var footerCss = require("../../css/footer.css");export default class ComponentFooter extends React.Component{ render(){ console.log(footerCss); return (// css样式使用 <footer class={footerCss.miniFooter}><h1>这里是页脚，一般放置版权的一些信息。</h1> </footer> ) } } -
CSS模版的全局和本地样式-
本地样式,经过
CSS模版导入使用./src/css/footer.css.miniFooter{ background-color: #333333; color: #ffffff; padding-left: 20px; padding-top: 3px; padding-bottom: 3px; } .miniFooter h1{ font-size: 15px; }或./src/css/footer.css:local(.miniFooter){ background-color: #333333; color: #ffffff; padding-left: 20px; padding-top: 3px; padding-bottom: 3px; } :local(.miniFooter) h1{ font-size: 15px; }
-
- 全局样式
> `./src/css/footer.css`
```CSS
:global(.miniFooter){
background-color: #333333;
color: #ffffff;
padding-left: 20px;
padding-top: 3px;
padding-bottom: 3px;
}
:global(.miniFooter) h1{
font-size: 15px;
}
```
CSS 模块化的有点
所有样式都是
local的, 解决了命名冲突和全局污染问题class名生成规则配置灵活, 可以压缩class名只需引用组件的
JS就能搞定组件的所有的JS和CSS依然是
CSS, 几乎令学习成本
JSX 样式于 CSS 样式的互换
CSS to React: https://staxmanade.com/CssToReact/
CSS
.miniFooter{
background-color: #333333;
color: #ffffff;
padding-left: 20px;
padding-top: 3px;
padding-bottom: 3px;
}
.miniFooter h1{
font-size: 15px;
}
React JSX
{
"miniFooter": {
"backgroundColor": "#333333",
"color": "#ffffff",
"paddingLeft": "20px",
"paddingTop": "3px",
"paddingBottom": "3px"
},
"miniFooter_h1": {
"fontSize": "15px"
}
}
