内联样式
- 在 组件的render 函数里面，用 const 变量定义json 格式的 CSS样式，只影响该组件，方式不推荐
import React from 'react';
import ReactDOM from 'react-dom';
export default class ComponentHeader extends React.Component{
render(){
const styleComponentHeader = {
header: {
backgroundColor: "#333",
color: "fff",
paddingTop: "15px",
paddingBottom: "15px"
}
}
return (
<header style={styleComponentHeader.header} className="smallFontSize">
<h1>这里是头部</h1>
</header>
);
}
}
文件中引用样式
注意在组件的 jsx 语法中， class 要更改为 className，然后再 html 文件中引用文件路径CSS 文件的命名规范
dialog__confirm-button--highlight
模块 - 属性名字 - 属性制定
内联样式的表达式
以一个点击后产生样式变化作为例子：
1、给 header 节点绑定onClick={this.switchHeader.bind(this)} 事件
2、构造函数 constructor 初始化 state 的 miniHeader 状态
3、给 switchHeader事件绑定this.setStatede 的变化
4、用三元表达式来执行事件变化paddingTop: (this.state.miniHeader) ? "3px" : "15px", paddingBottom: (this.state.miniHeader) ? "3px" : "15px",
import React from 'react';
import ReactDOM from 'react-dom';
export default class ComponentHeader extends React.Component{
constructor(){
super();
this.state = {
miniHeader: false
}
}
switchHeader(){
this.setState({
miniHeader: !this.state.miniHeader
})
}
render(){
const styleComponentHeader = {
header: {
backgroundColor: "#333",
color: "fff",
paddingTop: (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模块化
1、配置依赖包
$ npm install --save css-loader style-loder babel-plugin-react-html-attrs
2.Webpack配置(将依赖的打包关系引入)
var 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-loader!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 }),
],
};
3、编写 CSS 样式文件
4、在组件文件引入样式文件并保存为变量
5、在节点引用变量形成 CSS
示例：
import React from 'react';
var footerCss = require("../../css/footer.css");
export default class ComponentFooter extends React.Component{
render(){
console.log(footerCss);
return (
<footer className={footerCss.miniFooter}>
<h1>这里是页脚，一般放置版权的一些信息。</h1>
</footer>
)
}
}
JSX样式与 CSS 的互转
1、通过在线转化工具https://staxmanade.com/CssToReact/，把 CSS 样式拷贝近来，即可转化成 JSX 样式。
image.png
Ant Design 样式框架
https://ant.design/components/
1、引入依赖
npm install --save antd
2、配置Webpack
test: /\.css$/, loader: 'style-loader!css-loader',
3、在项目的最父文件引入全局 CSS 样式
import 'antd/dist/antd.css';
4、在组件中引入具体样式
import { Input, Button } from 'antd';
export default class BodyIndex extends React.Component{
render(){
return (
<Input placeholder="Basic usage" />
<Button type="primary">Primary</Button>
}
}
