react使用antd mobile

Ant-design框架

        1.  create-react-app antd
        2.  npm install antd-mobile --save
            npm run eject
            如果不成功：  git add . 
                        git commit -m 'init'
                        npm run eject
                        
        3.  修改package.json 
            "babel": {
                "presets": [
                "react-app"
                ],
                "plugins": [
                [
                    "import",
                    {
                    "libraryName": "antd-mobile",
                    "style": "css"
                    }
                ]
                ]
            },         
        4. 在根目录创建 config-overrides.js写入以下内容
            const { override, fixBabelImports } = require('customize-cra');
                module.exports = override(
                fixBabelImports('import', {
                    libraryName: 'antd-mobile',
                    style: 'css',
                })
            );

        5.  全部使用 import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
            按需要引入  
                1.需要安装插件 npm install babel-plugin-import --save-dev
                2.新建  ButtonCom.js 
                以引入button为例：[复制代码演示](https://mobile.ant.design/components/button-cn/)

                3.配置  index.js

            import React from 'react';
            import ReactDOM from 'react-dom';
            import ButtonCom from './ButtonCom'

			ReactDOM.render(
			  <React.StrictMode>
			    <ButtonCom />
			  </React.StrictMode>,
			  document.getElementById('root')
			);	
        6.  执行 yarn start

可以看到目前页面已经有样式了

本文地址：https://blog.csdn.net/Day71/article/details/109615513