首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析 目前存在的问题： 1. antd 样式被重复引用，打包时被重复编译进 css 文件，造成代码冗余。 2....组件自定义样式没有通过类名区分，导致页面中使用多个组件时样式污染。...关于 CSS 样式冗余问题 是因为多个组件的 less 文件中引用了 antd.variable.less 文件，用来实现主题的切换，打包时会重复/多次把这个文件编译进输出的 css 文件中。...私有源组件可以通过增加父元素类名的方式进行区分： /* index.less */ .parent-content { .ant-btn-primary { font-size: 18px;...参考文献： where() - CSS（层叠样式表） | MDN 学透CSS- :is 和 :where 让你的CSS更简洁 react中sass的使用，解决样式污染，样式穿透 未经允许不得转载：w3h5
什么是 Ant Design antd 是 蚂蚁金服 开源的 React UI 组件库，主要用于研发 企业级中后台 产品。...Ant Design 特点 提炼自企业级中后台产品的交互语言和视觉风格 开箱即用的高质量 React 组件 使用 TypeScript 开发，提供完整的类型定义文件 ⚙ 全链路开发和设计工具体系（...官方文档地址: https://ant.design/index-cn 点击 开始使用，会默认跳转到组件页面，再点击 研发： 创建过程我这里也贴一下我正好也是在创建一个项目，我这里创建的项目名称是 antd-demo...我们可以通过官方文档来查看，点击 组件： 组件非常的多这里我就挑几个常用的来介绍一下，比如说 Button，点击 Button： 点击显示代码，可以看到代码如下： 将代码拷贝到 App 组件当中： import...运行效果： 通过上面的代码我们可以看到，我们在使用 Ant Design 的时候，其实就是在使用它提供的组件 看了一个组件，那么我们再来看一个组件，比如说 Switch，点击 Switch： 首先导入
如果你仍在使用 React 15，请参考React 16 升级文档 其余 React 16 废弃生命周期 API 请参考 迁移导引 4.0 有哪些不兼容的变化 设计规范调整 行高从 1.5(21px)...全局阴影优化，调整为三层阴影区分控件层次关系。 气泡确认框中图标的使用改变，由问号改为感叹号。...React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构。 移除废弃的 API 移除了 LocaleProvider，请使用 ConfigProvider 替代。...迁移工具修改详情 @ant-design/codemod-v4 会帮你迁移到 antd v4, 废弃的组件则通过 @ant-design/compatible 保持运行, 一般来说你无需手动迁移。...icon 属性的调用转换成从 @ant-design/icons 中引入 import { Modal } from 'antd'; + import { AntDesignOutlined }
原代码基于 react 16.x、dva 2.4.1 实现，所以本文是参考了ant-design-pro v1[2]内部对权限管理的实现 2所谓的权限控制是什么？...这又分为了两部分： 侧边栏菜单 路由权限 在很多人的理解中，前端权限控制就是左侧菜单的可见与否，其实这是不对的。...，路由表和权限的处理统一在前端处理。...component代表路由对应的组件： import React, { createElement } from "react" import Loadable from "react-loadable...直接在组件中判断显然不太合适，我们把这部分逻辑抽离出来： /** * 通用权限检查方法 * Common check permissions method * @param { 菜单访问需要的权限
2.1、什么是Ant Design？ Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。...开箱即用的高质量 React 组件。 使用 TypeScript 构建，提供完整的类型定义文件。 全链路开发和设计工具体系。...2.2、开始使用 2.2.1、引入Ant Design Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。...在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。...// 开启Ant Design功能 }] ] }; 2.2.2、小试牛刀 接下来，我们开始使用antd的组件，以tabs组件为例，地址：https://ant.design/components/tabs-cn
前段时间做了一个项目，是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的，在减少包体积上有一些方法和大家分享一下。...按需加载你的组件 比如我的项目中有个 modal，用户不点击触发这个弹窗，代码是不会被使用到的。...但下面这样做却会将整个组件库打包进你的 js bundle 中，显然是不能用于生产环境。...less 自定义变量 + 按需加载 ant design 组件样式 在我们的项目中需要自定义 ant design 的组件样式，你可以通过 自定义 less 变量 的方式来实现你的自定义样式 @import...Ant design 的 LocaleProvider 中始终引用了整个 momentjs.
大家好，又见面了，我是你们的朋友全栈君。 前端的中后台管理系统相比于其他普通项目，从开发设计的角度来说有几点比较特殊： 一个是权限设计，具体实现可参考：传送门。 一个是页面布局的设计，也是本文要说的。...同vue-element-admin类似，主要区别就是antd pro的面包屑导航是另起一行单独放的，这样挤压了内容区域的空间，个人觉得还是放在顶部和右上角的快捷按钮放同一行最好。...示例项目：react-antd-mobx-admin 技术栈：react 17 + antd 4 + react-router-dom 6 + ts 路由统一管理使用 react-router-waiter...方案 效果图： 其实技术选型不那么重要，无论是react还是vue，element或是antd，思路一致，都只是实现代码的差异而已。...对于侧边栏菜单和面包屑导航，element和antd都有相应的组件可以直接使用，其他的手写实现。 三、css布局 良好的css布局代码才能保证页面布局的稳定性。
我们仍然会为 v3 版本进行半年的维护工作。维护截止日期为 2020 年 5 月。 设计规范升级 我们将基础圆角由 4px 调整为 2px。...你可以在页面中点击切换主题功能查看暗色主题效果： 64.gif 无边框组件 在业务中，我们发现有些场景会存在轻量级的选择组件。...更小的尺寸 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。...而对于不支持 sticky 的 IE 11，我们采取降级处理。 同时，我们提供了新的 summary API 用于实现总结行的效果： ? 对于 sorter 提供了多列排序的功能： ?
升级好最新前端框架后，让我们回到Mock服务前后端的配置服务开发中，最开始我们已经学会了Antd pro的中后台框架的创建，以及使用Ant Design组件进行布局式开发前端页面。...接下来让我们更进一步，了解和学习能让让中后台开发更简单的模板组件ProComponents。...可以显著地提升制作 CRUD 页面的效率，更加专注于页面 拿项目解释下，我们之前在实现项目管理的时候，是一个个组件组装起来，并且需要对样式进行布局调整。而且大部分页面的无非就是表单，搜索和分页表。...ProSkeleton 页面级别的骨架屏 组件包使用 需要安装依赖 $ npm i @ant-design/pro-components --save # 注意 使用条件 antd 的版本 >= 4.11.1...项目中使用 直接通过引用到 js/tsx中即可 // 每一个包都是一个独立的组件包，比如ProForm使用示例如下 import React from 'react'; import { ProForm
Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系； 注：antd 设计价值观 https://ant.design/docs/spec...设计尺寸 画板尺寸： 1024px * 1024px； 出血位：64px； 3. 如何使用 antd 的 Icon？ 3.1....自行引入 SVG 图标 标签也可以通过 component 引入自定义的 SVG React 组件； 注：svgr 可以完成 svg 文件到 react 组件的转换； 4....用途、目录结构 对外提供 Icon 接口； 整合 icons 和 icons-react，自动将 icons 中的所有 IconDefinition 注册到 icons-react 中，以便可以通过...component 接口，以便引入自定义的 React 组件（例如通过 svgr 转换 svg 得到的 React 组件）； 8.2.
二、主题定制 打开官方文档，官方文档地址：https://ant.design/docs/react/introduce-cn 在官方文档左侧有一个『定制主题』的菜单，点击进入，可以看到如下内容： Ant...在哪里可以找到这个文件呢，就是项目依赖文件夹 node_modules 中，然后找到 antd 文件夹，然后找到 dist 文件夹，然后找到 antd.less 文件，这个就是 Ant Design 的样式文件...我这里创建了一个全新的 React 项目，可以基于上篇文章创建方式创建，并且自行安装 Ant Design, 其实可以直接将上篇文章的项目拷贝一份改个名字即可： 在之前我们的 App 组件中，我们引入了一个...这里采用 ConfigProvider 组件进行主题配置，在 App 组件中引入 ConfigProvider 组件： + import { ConfigProvider } from 'antd';...Design Token 是一种用于描述设计系统的抽象，它是一种设计语言，用于描述设计系统中的设计原子，例如颜色、字体、间距、阴影等。
React中使用Antd教程文档： https://ant.design/docs/react/getting-started-cn 介绍：antd 是基于 Ant Design 设计体系的 React...UI 组件库,一个方便极速开发应用的插件 ，这些相当于帮我们封装了常用的组件，我们直接拿来用就行。...2：全局css样式 在react项目的css文件里面引入Antd的css @import '~antd/dist/antd.css'; 我这里是在app.css里面 ?...3：根据文档教程 https://ant.design/docs/react/use-with-create-react-app-cn 打开任意一个新建的组件 先引入全局css样式： import...继续使用一些评分组件 import React, { Component } from 'react'; //引入Antd import '..
在这篇教程的讲解过程中，我们将通过 Ant Design[17] 对应的 React 组件库 antd[18] 来辅助我们项目的编写，使得我们可以专注于讲解 TS 的核心知识，而不被繁杂的界面语言所干扰...除此之外 Ant Design 的周边生态也很丰富： 包括新一代数据可视化解决方案：AntV[20] 一个基于 Preact / React / React Native 的 UI 组件库：Ant Design...Mobile[21] 开箱即用的中台前端/设计解决方案：Ant Design Pro[22] 插画设计：海兔[23] 一款为设计者提升工作效率的 Sketch 工具集 ：Kitchen[24] 后面图雀社区计划围绕...自此，我们就引入了 antd 组件库，并进行了按需配置使用以及配置主题色和使用了 Ant Design 最新的暗色主题 -- Dark Mode。...antd 组件库，并使用 react-app-rewired 替换默认的 react-scripts 来完成对 CRA 的 Webpack 配置进行修改，以是我们可以获得 antd 组件的按需引用和主题定制的功能
进行需求分析整理后，经过了一番查找，发现React版本的antd的表格组件功能很强大，可定制程度很高，可以助我完成这个业务需求的开发。..."> 上述用到的资源文件地址: react-antd-schedule/lib 我们需要把react相关代码写在text/babel标签中，如下所示，我们打印antd和react看看是否有值。...image-20201119161505912 需要注意的是，CDN引入React和antd，他们是在全局暴露了一个对象，在使用它内部的方法时就需要React.xx、antd.xx来访问了。...日程内容列的每个单元格有5种状态，需要通过某种方式来区分，让用户一眼就能看出当前日程处于什么状态。...最后实现的效果如下所示，实现代码请移步：react-antd-schedule/index.html image-20201119175256753 动态增加列 这个日程表用户可以通过点增加图标来增加一列日程
2.2 开始使用 2.2.1、引入Ant Design Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。...在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。...在config.js文件中进行配置： export default { plugins: [ ['umi‐plugin‐react', { dva: true, // 开启dva功能...antd: true // 开启Ant Design功能 }] ] }; 2.2.2、小试牛刀 接下来，我们开始使用antd的组件，以tabs组件为例，地 址：https://ant.design...看下官方给出的使用示例 ? 下面我们参考官方给出的示例，进行使用： 创建MyTabs.js文件： ? 效果： ? 到此，我们已经掌握了antd组件的基本使用。
不同的场景我们有不同的应对方案，业务和通用组件的开发也有所差异，这篇文章借助Ant Design，一起体悟大厂在开发类似通用组件或类库时，如何定义规范，如何实施协同开发方案，怎么把控开发过程等。...，可以推测出预览项目和打包需要两套不同打包编译机制，但是在项目中一般只能使用一种打包方式，即：webpack配置只有一个或一套区分编译环境的文件。...文件通过转换生成SPA网页的框架；antd-tools 定义了ant-design组件库打包相关的处理方案。.../site/bisheng.config.js antd-tools antd-tools负责组件的打包、发布、提交守卫、校验等工作 antd-tools run dist antd-tools run...好了，到这里给大家介绍完一个库是如何从零开发出来的，我相信大家明白了 Ant-Design 组件的构建以及打包的整个流程，应对开发中其他一些自定义的库封装发布将会胸有成竹。
Layout 我们使用 ant design 的组件来实现，所以首先我们要引入 antd 和 react-router-dom，并在 .meteor/packages 文件中删除项目自带的 kadira...yarn add antd --save yarn add react-router-dom --save 在 /imports/startup/client/index.js 中引入 antd 的 css...样式表，如下所示： import React from 'react' import { Meteor } from 'meteor/meteor' import { render } from 'react-dom...meteor add react-meteor-data 然后修改 /imports/ui/components/Links.js 文件，添加 ant design 的 Table 组件并订阅 links...withTracker 中还使用了 setLinksCount 方法来设置数据总数的状态，让 Table 表格可以看到分页器下面所有页数的按钮（如果不这样做只能看到第一页的按钮），最后在点击分页器第几页按钮时出发
，差异的部分，一般在功能设计的时候会通过外部传参区分或者控制。...所以开发通用组件，参数设计是重要的一个环节。如果刚开始不是很擅长设计参数，可以参考Antd的参数设计，Antd的组件丰富且功能强大，所以参数考虑的也很周全。边学边练，效果更佳。...展示层看col文件中这三行代码，和各种style、className变量。不难发现，栅格化布局主要是通过组件参数对样式的控制来实现的。...rc-steps我在看Antd的源码时发现，有些组件底层用的第三方react-component中的组件。当然这个组件库也是属于Antd的。...我带着这些功能是怎样实现的好奇心，研究了Antd的源码。内容有点多，我挑基础的部分讲一讲。rc-tableTable组件，底层主要使用react-component中的table组件。
这样的需求在 Vue 中使用 keep-alive 即可实现，但是在 React 中，React Router 切换路由后就会卸载组件，而本身并没有提供类似 keep-alive 的功能，所以实现多页签的功能就会变得格外困难...社区上关于多页签的需求呼声也非常高，但是如 React 社区比较出名的中后台方案 Ant Design Pro 也不支持该功能，两年没看，至今仍然有很多 Issue 提出这类需求： Antd Pro...，也比较片面，SPA 的页面不开浏览器 tab 应该更符合 Antd 的设计价值观：足不出户 - Ant Design，就连最新版的 Chrome 都已经支持“群组”功能了，让用户在 SPA 页面尽量不开浏览器页签才应该是更好的体验设计...我们在多页签的迭代中增加了相同组件多开功能，这个场景比较常见，比如列表页点击链接跳转到表单页，可以同时打开多个表单，这样在不使用 Redux 是没有什么问题，但是一旦数据存在 Redux 中，多开组件就会有问题...，Antd多标签页后台管理模板） react-live-route （207 star，也是一种缓存路由的轮子） React Ant （232 star，基于Ant Design Pro 2.0 的多标签页
在 React 领域里，一直缺少一套靠谱、好用的移动端组件，蚂蚁的 antd mobile v2 年久失修，几乎无人维护，跟 antd 相差甚远，在设计上，也有很多也已经跟不再符合 Alipay Design...image-20210827081425771 5.0（白杨） Roadmap 5.0（白杨） 是我们最新在开发的下一代 antd-mobile 组件库，经过近 5 个月的开发，已经覆盖了 48 个组件...重新设计的 API v5 所有的组件都是完全重写的，API 也是重新设计的，更现代化也更优雅。 拥抱 css 变量 css 变量提供了更加动态化的样式调整能力，也让组件的样式调整变得更加简洁优雅。...在业务中对组件样式魔改是一件非常痛苦也非常难以维护的事情，我们希望通过 css 变量改变这一现状。...: https://github.com/pmndrs/react-spring [9] 去这里: https://next.mobile.ant.design/guide/quick-start [10
领取专属 10元无门槛券
手把手带您无忧上云
