內聯樣式

• 在 組件的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>
  }
}