安装 Ant Design 
npm install antd --save

  

yarn add antd

  

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

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

npm install babel-plugin-import  --save

  

然后在package.json中加入
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}]
]

  

尝试了手动修改package.json,但是不行,
"dependencies": {
"antd": "^3.18.1",
"axios": "^0.18.0",
"babel-plugin-import": "^1.10.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"json-server": "^0.14.2",
"mockjs": "^1.0.1-beta3",
"webpack": "4.29.6"
},

  

//再尝试正常顺序然后,在手动分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. python 并发编程 io模型 目录

    python 并发编程 IO模型介绍 python 并发编程 socket 服务端 客户端 阻塞io行为 python 并发编程 阻塞IO模型 python 并发编程 非阻塞IO模型 python 并 ...

  2. 浅谈spring配置定时任务的几种方式

    网上看到好多关于定时任务的讲解,以前只简单使用过注解方式,今天项目中看到基于配置的方式实现定时任务,自己做个总结,作为备忘录吧. 基于注解方式的定时任务 首先spring-mvc.xml的配置文件中添 ...

  3. cocos creator 3D | 拇指投篮 | 3D项目入门实战

    你的命中率是多少呢?文章底部试玩! 效果预览 配置环境: Cocos Creator 3D v1.0.1 玩法说明: 触摸屏幕,向上滑动投篮!注意篮板是会移动的哦!看看你的命中率是多少! 实现原理 为 ...

  4. Solr 4.4.0增加core

    假设现在我们现在需要增加一个新的core名称为"core1" 1. 在solr_home目录新建目录core1 $ mkdir /usr/local/contentplatform ...

  5. Atomic实现原子性源码分析:CAS(比较并交换)、Unsafe类

    1.CAS: 比较并交换(Compare And Swap),是Unsafe类中的一条CPU系统原语,原语的执行必须是连续的,在执行过程中不允许被中断,即CAS是一条CPU的原子指令,不会造成数据不一 ...

  6. cannot convert from pointer to base class 'QObject' to pointer to derived class 'subClass' via virtual base 'baseClass'

    QT 编译不过的另一个问题: 1. 新建一个console工程 QT -= gui CONFIG += c++ console CONFIG -= app_bundle # The following ...

  7. python-day13(正式学习)

    闭包函数 闭包 闭包:闭是封闭(函数内部函数),包是包含(该内部函数对外部作用域而非全局作用域的变量的引用).闭包指的是:函数内部函数对外部作用域而非全局作用域的引用. 额...这里提示一下闭包!=自 ...

  8. Kafka 教程(二)-安装与基础操作

    单机安装 1. 安装 java 2. 安装 zookeeper [这一步可以没有,因为 kafka 自带了 zookeeper] 3. 安装 kafka 下载链接 kafka kafka 是 scal ...

  9. Jade学习(三)之语法规则下

    jade可以自动识别单双标签 // 1.jade内容: input(type="button", value="点击") div // 此时输出❌error:i ...

  10. Jquery复习(三)之链式调用

    通过 jQuery,可以把动作/方法链接在一起. Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQue ...