reactJS -- 14 AntDesign樣式框架介紹

一. 框架（快速樣式）

material-ui 官網連接 ： http://www.material-ui.com/#/

阿里芭比框架 ：https://ant.design/index-cn

1.安裝

使用 npm 或 yarn 安裝#

咱們推薦使用 npm 或 yarn 的方式進行開發，不只可在開發環境輕鬆調試，也可放心地在生產環境打包部署使用，享受整個生態圈和工具鏈帶來的諸多好處。

$ npm install antd --save

$ yarn add antd

若是你的網絡環境不佳，推薦使用 cnpm。

2.在全局index.js 中引入資源

import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

3.在webPack.config.js中

對css 解析loader  進行變動，不須要進行本地化編碼，恢復爲如下

//下面是添加的 css 的 loader，也便是 css 模塊化的配置方法，你們能夠拷貝過去直接使用
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

4.在footer.js 中使用

須要什麼樣式就引入。

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'antd'
//var footerCss = require("../../css/footer.css");
//export 暴露
export default class ComponentFooter extends React.Component{
  render(){   //解析類的輸出

    var footerConvertStyle = {
        "miniFooter": {
          "backgroundColor": "#333",
          "color": "#fdd",
          "paddingLeft": "20px",
          "paddingTop": "3px",
          "paddingBottom": "3px"
        }

    }
    return (
      <footer style={footerConvertStyle.miniFooter}>
        <h1>這裏是頁腳，通常放置版權信息</h1>
        <Input placeholder="Basic usage" />
      </footer>
    )
  }
}