1. 安装 Ant Design 
  1. npm install antd --save

  

  1. yarn add antd

  

  1. 注释:https://www.jianshu.com/p/21caf40ee93e(copy)
    然后在开发的过程中,慢慢替换跟舍弃material UI。然而之后的开发,我也发现了Ant Design的弊端,
    那就是组件基本上是完全没有办法自定义样式,基本上所有组件都不接收style参数。想要换个颜色?不行。
    想要改个大小?也不行。
通过css强制更改,主要是用css中的important强制覆盖掉ant design的样式。我们首先在审核ant组件的元素找到组件的类名,然后在css文件中输入类名,将你需要覆盖的样式用important强制覆盖。同时为了防止强制覆盖样式会引起全局的样式冲突,我们需要给组件的父级一个id,然后css中,组件的类名需要写在父级的id里面,这样样式覆盖只会在你定义的这个父级里面生效。
//--------------------打断一下--------------------------------------
 作者本人:这是别人文章里看到的,但是本人学习过程中确实看到style可以修改

 
//----------------------------------------------------------
但是样式不展示,所以还要引入插件

  1. npm install babel-plugin-import --save

  

然后在package.json中加入
  1. "plugins": [
  2. ["import", {
  3. "libraryName": "antd",
  4. "libraryDirectory": "es",
  5. "style": "css"
  6. }]
  7. ]

  

尝试了手动修改package.json,但是不行,
  1. "dependencies": {
  2. "antd": "^3.18.1",
  3. "axios": "^0.18.0",
  4. "babel-plugin-import": "^1.10.0",
  5. "react": "^16.8.6",
  6. "react-dom": "^16.8.6",
  7. "react-scripts": "3.0.1",
  8. "redux": "^4.0.1"
  9. },
  10. "devDependencies": {
  11. "babel-cli": "^6.26.0",
  12. "json-server": "^0.14.2",
  13. "mockjs": "^1.0.1-beta3",
  14. "webpack": "4.29.6"
  15. },

  

//再尝试正常顺序然后,在手动分dependencies和devDependencies,但不知道对线上是否有影响

最后网上看到有大神指导,看下一篇文章

 
 

实战build-react(二)-------引入Ant Design的更多相关文章

  1. React组件库Ant Design的安装与使用

    一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...

  2. 测试平台系列(5) 引入Ant Design Pro

    引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...

  3. react 编写 基于ant.design 页面的参考笔记

    前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...

  4. 实战build-react(二)-------引入Ant Design(增加)

    https://blog.csdn.net/zhan_lijian/article/details/85271906(copy) 1.肯定参考facebook关于react官网咯 快速搭建 creat ...

  5. create-react-app 引入ant design 及 使用 less

    全局引入: 第一步:全局安装 create-react-app npm install create-react-app -g 第二步:安装 yarn npm install -g yarn 第三步: ...

  6. React学习及实例开发(二)——用Ant Design写一个简单页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.引入Ant Design 1.安装antd yarn add antd 2.引入 react-app-re ...

  7. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  8. 基于Ant Design UI框架的React项目

    概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo ...

  9. React + Ant Design网页,配置

    第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步:  https://blog.csdn.net/u0129070 ...

随机推荐

  1. Revo Uninstaller Pro - 真正彻底卸载软件不留垃圾的强大神器!(清理安装残留文件/注册表)

    大家都知道 Windows 在卸载软件时总是不够彻底,系统C盘总会留下大量难以辨别和清理的垃圾文件和临时文件,时间长了注册表也会变得非常臃肿,不仅浪费硬盘空间,而且也会明显拖慢系统响应和启动速度. R ...

  2. nodejs 写服务器解决中文乱码问题

    nodejs 写服务器解决中文乱码问题:https://blog.csdn.net/worldmakewayfordream/article/details/77483423     本文链接:htt ...

  3. Linux mv命令(7)

    mv命令,move的缩写,顾名思义是移动文件的意思.其实就相当于剪切操作,而前面说的cp命令,就是复制粘贴,这两个有什么区别想必不用多说. 基本使用 使用格式 mv 源文件 目标文件 我的根目录下有 ...

  4. 单节点FastDFS安装

    环境:centos7 1.什么是分布式文件系统 分布式文件系统(Distributed File System)是指文件系统管理的物理存储资源不一定直接连接在本地节点上,而是通过计算机网络与节点相连. ...

  5. 第一课 初识Linux(一)

    Linux起源 创始人:李纳斯.托瓦兹 Linux简介: Linux是一套免费使用和自由传播的类UNIX操作系统:是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.Lin ...

  6. static 和extern关键字

    static是C++中常用的修饰符,它被用来控制变量的存贮方式和可见性.extern "C"是使C++能够调用C写作的库文件的一个手段,如果要对编译器提示使用C的方式来处理函数的话 ...

  7. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  8. WebSocket的使用(基于VUE与SpringBoot)

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 We ...

  9. django-restframework使用

    安装restframework: pip install djangorestframework 修改项目settings.py: INSTALLED_APPS = [ 'django.contrib ...

  10. 18.AutoMapper 之条件映射(Conditional Mapping)

    https://www.jianshu.com/p/8ed758ed3c63 条件映射(Conditional Mapping) AutoMapper 允许你给属性添加条件,只有在条件成立的情况下该成 ...