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>
    )
  }
}