08.React样式
2018-02-06 本文已影响0人
Ching_Lee
这里使用的是webpact和npm搭建的开发环境react-existing（参考第一节),在基础上做的改动。
1.内联样式
1.1 使用jsx引入内联样式
header.js
import React from 'react'
import ReactDom from 'react-dom'
class Header extends React.Component{
render(){
const headerStyle={
divStyle:{background:"black",textAlign:"center"},
pStyle:{color:"yellow"},
hStyle:{color:"white"}
};
return (
<div style={headerStyle.divStyle}>
<h1 style={headerStyle.hStyle}>这是头部</h1>
<p style={headerStyle.pStyle}>这是小标题</p>
</div>
);
}
}
index.js
import React from 'react'
import ReactDom from 'react-dom'
import Header from './Component/header'
ReactDom.render(<Header/>, document.getElementById("page"));
1.2 引入样式表,这里的样式会对所有的组件起作用
header.js
import React from 'react'
export default class Header extends React.Component{
render(){
/* const headerStyle={
divStyle:{background:"black",textAlign:"center"},
pStyle:{color:"yellow"},
hStyle:{color:"white"}
};*/
return (
<div className="header">
<h1>这是头部</h1>
<p>这是小标题</p>
</div>
);
}
}
index.css
.header{
background:black;
text-align:center;
}
.header h1{
color:white;
}
.header p{
color:yellow;
}
将index.css引入index.html
1.3 内联样式的表达式
2.css模块化
react环境搭建及css模块化配置源码：https://github.com/Ching-Lee/react-create
我们希望css只对相应的组件起作用
进入项目中安装如下两个个插件。
"style-loader"
"css-loader"
下图第一个插件是解决JSX中class必须写成className，如果想要按照原来的css来写，可以安装该插件，这里可装可不装。
打开webpack.config.js
添加插件react-html-attrs(安装的)
添加css模块化的配置
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]'
},
]
},
项目目录
header.js
import React from 'react'
var headerCss=require("../../css/header.css");
export default class Header extends React.Component{
render(){
/* const headerStyle={
divStyle:{background:"black",textAlign:"center"},
pStyle:{color:"yellow"},
hStyle:{color:"white"}
};*/
return (
<div class={headerCss.header}>
<h1>这是头部</h1>
<p>这是小标题</p>
</div>
);
}
}
header.css
.header{
background:black;
text-align:center;
}
.header h1{
color:white;
}
.header p{
color:yellow;
}
index.js
import React from 'react'
import ReactDom from 'react-dom'
import Header from './Component/header'
ReactDom.render(<Header/>, document.getElementById("page"));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试react安装环境</title>
</head>
<body>
<div id="page"></div>
<script type="text/javascript" src="src/bundle.js" charset="utf-8"></script>
</body>
</html>
3.Ant Design样式框架介绍
官网:https://ant.design/docs/react/introduce-cn
- 安装及环境配置
进入项目目录，执行安装命令
npm install antd --save
webpack.config.js
//下面是使用ant-design的配置文件
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
- 在组件中使用
header.js
import React from 'react';
import { Button } from 'antd';
import { Input } from 'antd';
export default class Header extends React.Component {
render() {
/* const headerStyle={
divStyle:{background:"black",textAlign:"center"},
pStyle:{color:"yellow"},
hStyle:{color:"white"}
};*/
return (
<div>
<div>
<h1>这是头部</h1>
<p>这是小标题</p>
</div>
<Button type="primary"> Primary </Button>
<Button>Default</Button>
<Button type="dashed"> Dashed</Button>
<Button type="danger">Danger</Button>
<Input placeholder="Basic usage" />
</div>
);
}
}
- 在index.js中引入样式
import React from 'react';
import ReactDom from 'react-dom';
import Header from '../js/Component/header';
import 'antd/dist/antd.css';
ReactDom.render(<Header/>, document.getElementById("page"));
