內(nèi)聯(lián)樣式
- 在 組件的render 函數(shù)里面迅皇，用 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 文件的命名規(guī)范
dialog__confirm-button--highlight
模塊 - 屬性名字 - 屬性制定
內(nèi)聯(lián)樣式的表達(dá)式
以一個(gè)點(diǎn)擊后產(chǎn)生樣式變化作為例子：
1租悄、給 header 節(jié)點(diǎn)綁定onClick={this.switchHeader.bind(this)} 事件
2谨究、構(gòu)造函數(shù) constructor 初始化 state 的 miniHeader 狀態(tài)
3、給 switchHeader事件綁定this.setStatede 的變化
4恰矩、用三元表達(dá)式來執(zhí)行事件變化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配置(將依賴的打包關(guān)系引入)
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萎胰、在節(jié)點(diǎn)引用變量形成 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>這里是頁腳，一般放置版權(quán)的一些信息棚辽。</h1>
</footer>
)
}
}
JSX樣式與 CSS 的互轉(zhuǎn)
1技竟、通過在線轉(zhuǎn)化工具https://staxmanade.com/CssToReact/，把 CSS 樣式拷貝近來屈藐，即可轉(zhuǎn)化成 JSX 樣式榔组。
Ant Design 樣式框架
https://ant.design/components/
1熙尉、引入依賴
npm install --save antd
2、配置Webpack
test: /\.css$/, loader: 'style-loader!css-loader',
3搓扯、在項(xiàng)目的最父文件引入全局 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>
}
}
