React之Antd-mobile使用方式及配置自定义主题颜色

一、使用Antd-mobile

（1）下载antd-mobile

$ npm install antd-mobile --save

（2）使用

找到react 项目下的public文件夹下的index.html文件

1. 修改meta 的viewport为以下：

 <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

2. 在head标签中添加两个script标签，属性为下：

 <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
      }, false);
    }
    if (!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' +
        '>' + '<' + '/' + 'script>');
    }
  </script>

3. 在APP.tsx中引入css

import React from 'react'
import Router from './router'
import 'antd-mobile/dist/antd-mobile.css'

function App() {
  return (
    <div className="App">
      <Router></Router>
    </div>
  )
}

export default App

然后在页面中引入所需要的antd-mobile组件即可使用

二、修改配置颜色

（1）安装包

$ npm install react-app-rewired customize-cra --save-dev
$ npm install babel-plugin-import --save-dev

（2）修改package.json

-为删除
+为添加

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

（3）根目录新建config-overrides.js

做如下配置

法一：直接在modifyVars修改

const { override, fixBabelImports, addLessLoader } = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@brand-primary': '#ccc',
    },
  })
)

法二：根目录下新建antd-theme.json文件

1. 输入要修改的颜色

{
  "@brand-primary": "darkcyan"
}

2. 修改引入

const { override, fixBabelImports, addLessLoader } = require('customize-cra')
const theme = require('./antd-theme')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme
  })
)

注意：

1. 配置好了需要重启项目
2. 如果报错，需要确定下的包是否ok，确定依赖版本

 "devDependencies": {
    "babel-plugin-import": "^1.13.0",
    "css-loader": "^3.2.1",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.1"
  }