React学习 - 四.样式

内联样式

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