文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

antd mobile v5 它悄悄的来了

在 React 领域里，一直缺少一套靠谱、好用的移动端组件，蚂蚁的 antd mobile v2 年久失修，几乎无人维护，跟 antd 相差甚远，在设计上，也有很多也已经跟不再符合 Alipay Design...5.0 会带来什么 视觉规范 和 v3 v4 版本一致，v5 也将沿用最新版本的支付宝基础设计规范 Alipay Design[6]。...重新设计的 API v5 所有的组件都是完全重写的，API 也是重新设计的，更现代化也更优雅。 拥抱 css 变量 css 变量提供了更加动态化的样式调整能力，也让组件的样式调整变得更加简洁优雅。...在业务中对组件样式魔改是一件非常痛苦也非常难以维护的事情，我们希望通过 css 变量改变这一现状。...了解更多 如果你想了解如何使用，可以去这里[9] 如果你想点点试试各种组件，可以去这里[10] 此外，在这里[11]我们汇总了一些常见问题，希望能帮到你 发布计划 “这些里程碑只是我们大致的计划，随着项目的不断推进

1.9K30

可能是你见过的最完善的微前端解决方案

如何在浏览器运行时获取远程脚本中导出的模块引用也是一个需要解决的问题。...解决的办法是把 antd 样式上浮一层，丢到主文档里，但这么做意味着子应用的样式直接泄露到主文档了。gg... CSS Module? BEM?...社区通常的实践是通过约定 css 前缀的方式来避免样式冲突，即各个子应用使用特定的前缀来命名 class，或者直接基于 css module 方案写样式。...JS 隔离 解决了样式隔离的问题后，有一个更关键的问题我们还没有解决：如何确保各个子应用之间的全局变量不会互相干扰，从而保证每个子应用之间的软隔离？...这个问题比样式隔离的问题更棘手，社区的普遍玩法是给一些全局副作用加各种前缀从而避免冲突。

1.8K00
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    如何优雅地覆盖组件库样式？

    组件库的样式覆盖不掉，这应该是很多前端在工作中遇到过的问题。今天从实际案例出发分析原因，最后会给出在React和Vue项目中的最优解。 本文会讲清： React中CSS Module的原理是什么？...这里补充一点，同样也是组合选择器，但并集选择器（逗号）优先级不累计：.A, .B,选择.A或者.B元素（可以是逗号+空格） 样式隔离CSS Module和Scoped 上面我们引入自定义的全局CSS文件...，只在当前这个文件下生效，彻底避免造成全局污染。...结语 本文通过如何修改UI组件内部样式为切入点，分析了几种解法。...了解了组合选择器的优先级分数累加，以及在实际React、Vue项目用到的样式隔离方案——CSS Module和Scoped的原理，最后是介绍了在样式隔离的情况下，如何使用:global和深度作用选择器做样式覆盖

    2.8K10

    使用React全家桶搭建一个后台管理系统

    在此文的基础上，写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。...存放的都是react组件，区别是：只要和主页样式有关的组件就放在container中，和功能有关的模块(比如我实现分装的表格组件、弹出输入框组件等)就应放到components中; 前端有些通用配置最好是存到全局...", style: 'css' }]], ], cacheDirectory: true } }, ②引人less: 首先引人 less-loader 来加载 less 样式，同时修改...", style: 'css' }]], + ['import', [{ libraryName: "antd", style: true }]], // 加载 less 文件...antd(2.10) antd是（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出的一个中台设计语言 Ant Design，使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司，而且我从他们的设计理念也学到了很多关于

    1.7K90

    基于 qiankun 的微前端实践

    这里必然要涉及前端的跨域问题，尤其是当主应用和微应用的域名不一致时，qiankun 客户端如何能够在跨域的限制之下获取到微应用的页面资源？...FAQ 1、如何解决 第三方 SDK JS 文件加载失败问题 微信和企业微信的 SDK 是不可以自行构建 Http 请求加载的，这是由于其安全策略导致的，且每次返回的内容有安全限制的改动，无法复用。...从最早的 Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决 CSS 全局生效带来的副作用。...在前端开发过程中，我不可避免的会使用到各种前端的组件库，例如 antd、echarts，且都支持自定义主题配置，假如基站应用和微应用之间主题配置冲突了，就需要我们采用类似 CSS module 的方案，...第三方类库的样式类名往往都是有通用类名前缀，这是我们能够解决这个问题的基本前提条件，我们在在 CSS 构建阶段对 css class 进行替换和调整。

    62220

    React 组件库 CSS 样式问题分析

    首先分享一篇网易云音乐技术团队整理的一篇文章 React 组件库 CSS 样式方案分析 目前存在的问题： 1. antd 样式被重复引用，打包时被重复编译进 css 文件，造成代码冗余。 2....关于 CSS 样式冗余问题 是因为多个组件的 less 文件中引用了 antd.variable.less 文件，用来实现主题的切换，打包时会重复/多次把这个文件编译进输出的 css 文件中。...全局样式支持格式，styles是否可以支持import等方式 关于组件之间样式污染问题 本地组件可以采用 cssModules 维持类名 的方式，也就是借用 :global 来找到组件的类名： 举个例子...参考文献： where() - CSS（层叠样式表） | MDN 学透CSS- :is 和 :where 让你的CSS更简洁 react中sass的使用，解决样式污染，样式穿透 未经允许不得转载：w3h5...» React 组件库 CSS 样式问题分析

    2.4K20

    多应用聚合实践

    此外，需要注意页面和接口请求的跨域问题。在子应用中，我们可能把页面和接口放在同一个域下以避免跨域问题；但在将子应用聚合到父应用之后，若父应用和子应用不在同一个域，应将接口代理转发一下。...若想设计的通用一些，则需要将子应用打包成一个整体输出，这将导致子应用失去按需加载、资源缓存等优势。 在将子应用的资源文件引入父应用之后，其中定义的全局变量和样式会影响父应用中的其它内容。...qiankun是另一款微前端框架，它在此single-spa的基础上使用HTML ENTRY代替了JS ENTRY，解决了这些弊端。...为了避免多个应用挂载的CSS和JS互相影响或冲突，qiankun 对其分别做了处理。 隔离CSS 隔离CSS有两种模式，一种为shadowDOM，另一种为scoped CSS。...CSS隔离问题了。

    1.6K20

    ​年终盘点: 复盘20+基于React的开源管理后台&插件

    项目功能： 企业级的中后台设计系统解决方案：基于对阿里集团中后台业务的总结和抽象，提供了一套开箱即用的核心模式 强大的配置平台，轻松维护品牌统一：通过设计系统站点，统一管理设计物料和前端物料；使用 Design...Token，轻松定制全局样式 模块化研发，让效率突飞猛进：配合前端工具，开发模块模板更高效 原生插件，让设计和研发无缝衔接：设计系统里所有设计物料和前端物料，都能通过 Sketch 插件直接使用，真正做到...5.Ant Design (Antd)是一个基于React技术栈的UI组件库,由蚂蚁金服前端团队开发和维护。Antd提供了丰富的组件和配套的设计规范,可以帮助开发者快速构建高质量的Web应用。...并且是一个 React样式库,可以帮助你很快构建漂亮的UI。 框架性能： 追求性能体验，MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K。...ArcoDesign的目标，即通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题，同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。

    1.7K10

    React组件设计实践总结03 - 样式的管理

    解决的方向: 生成唯一的类名; shadow dom; 内联样式; Vue-scoped 方案 2️⃣ 依赖 由于 CSS 的’全局性’, 所以就产生了依赖问题: 一方面我们需要在组件渲染前就需要先将...CSS 加载完毕, 但是很难清晰地定义某个特定组件依赖于某段特定的 CSS 代码; 另一方面, 全局性导致你的样式可能被别的组件依赖(某种程度的细节耦合), 你不能随便修改你的样式, 以免破坏其他页面或组件的样式...最基本的解决办法是使用类似 BEM 命名规范来避免组件之间的命名冲突, 再通过创建优于复用, 组合优于继承的原则, 来避免组件间样式耦合; 3️⃣ 无用代码的移除 由于上述’依赖’问题, 组件样式之间并没有明确的边界...有些开发者为了解决这个问题, 使用!important 声明属性, 这无疑是进入了另一个坑. 解决方向：避免使用全局样式，组件样式隔离；样式加载和组件生命周期绑定 ---- 2....组件可以认为是 UI 设计师 的产出, 如果你的应用有统一和规范的设计语言(参考antd), 这些配置会很有意义。样式可配置化可以让你的代码更灵活, 更稳定, 可复用性和可维护性更高.

    7.1K20

    精读《css-in-js 杀鸡用牛刀》

    3 精读 无论是 css-in-js 还是 css 预编译的尝试，各自都具有强大优点，本文对 css-in-js 提出的质疑我认为是欠妥当的，下面谈谈 css-in-js 如何解决作者提出的问题，以及简单介绍...3.1 css-in-js 依然具备视觉一致性 文中提出，网站样式要从全局考虑，模块化样式行为的优点是解决了样式冲突问题，但因此也削弱了对全局样式的把控。...像 css-modules 这种解决方案恰恰反其道而行之，通过层级避免冲突，通过预编译解决阅读负担，然而在没有预编译的情况下，最小化适配深度原则依然是最有效的。...缺点大部分存在漏洞，但它警示了我们，css 设计的初衷是全局化控制样式，即便产生了样式冲突、混乱的问题，但我们仍要记住，在模块化开发的今天，仍要保持网站风格的整体性，即便使用了 css-in-js 的开发方式...虽然作者呼吁我们不要只顾着 css-in-js，要放眼看看 OOCSS, SMACSS, BEM, ITCSS, 和 ECSS 等基于原生 css 的解决方案，但我觉得把这些思想运用到 css-in-js

    74820

    『Ant Design』主题定制

    这包括全局样式，比如主题颜色、圆角和边框样式，还有特定组件的外观定制。简而言之，你可以轻松地让 Ant Design 看起来符合你的品牌和业务的独特需求。...三. 4.x Ant Design 4.x 版本主题定制 方式一（修改样式变量，2B铅笔做法） 在 Ant Design 4.x 版本中，我们可以通过 less 和 CSS 变量来定制主题，什么意思呢？...less 引入的方式了，所以这里需要更改一下引入方式，将 css 引入方式改为 less 引入方式： /* App.js */ - import 'antd/dist/antd.css'; + import...ConfigProvider 是一个全局化配置的组件，目前支持配置 antd 组件库的国际化文案、开始时间、全局化样式等。...Design Token 是一种用于描述设计系统的抽象，它是一种设计语言，用于描述设计系统中的设计原子，例如颜色、字体、间距、阴影等。

    57650

    Chrome 99新特性：@layers 规则浅析

    .post 中的 link 样式覆盖的问题，不符合预期 目前可能会比较常见使用 BEM(Block, Element, Modifier) 的方式通过避免名称冲突，来解决这些问题，例如这样......有没有什么更好的办法来解决我们的问题呢? 前置 在继续之前，我们先复习一下 CSS 的样式优先级。...(权重)如何，总是后声明的 Layer 中的样式更优先一些 调整 layer 的顺序 假如我们对这些样式的优先级不满意，想要稍做修改，只需要在前面加上声明......important 是反着来的，和其他层叠权重一样 解决问题 「问题 1：引入组件顺序导致的问题」 因为层中的样式优先级总是更低，因此将 antd 的样式放入 antd 层中即可，无论以何顺序引入都不会覆盖我们不在层中的样式...「问题 2，组件嵌套导致的问题」 给来自不同组件的样式分配不同的层，通过组织层的顺序，即可避免这一问题。

    1K10

    使用CSS3绘制图表，提升图表展示性能

    在阅读这篇文章前，推荐一篇“好”文章：关于float元素浮动后高度变化导致排列错位的问题原创这篇文章说明了使用CSS技术的浮动后出现的排列错误，通过CSS的清除浮动来解决这个问题，并且说明了清除浮动的相关原理...其中，CSS3（层叠样式表版本3）作为一种强大的样式表语言，为网页设计带来了革命性的变化。CSS3不仅提供了丰富的样式属性，还支持各种动画效果和交互功能，使得网页设计更加生动和有趣。...我们将从CSS3的基础知识入手，回顾选择器、盒模型和布局等核心概念。然后，我们将介绍如何使用CSS3创建基本的柱状图结构，并通过设置宽度、高度和背景颜色等属性来定制图表的外观。...第一部分：CSS3基础回顾在深入探讨如何使用CSS3绘制柱状图之前，我们有必要回顾一下CSS3的一些基础知识。这些基础知识将为我们后续的学习打下坚实的基础。...我们可以定义一些全局变量，然后在样式中引用这些变量。

    11710

    作为面试官，为什么我推荐组件库作为前端面试的亮点？

    组件设计：需要考虑响应式、主题、国际化、TypeScript 支持等问题，以保证组件的灵活性和可扩展性。...组件库如何实现在线主题定制的? 1. 使用 CSS 变量定义样式 将组件的样式使用 CSS 变量定义,这样可以通过改变 CSS 变量的值来修改样式。...在实践中，以上的策略和方法可能需要根据具体的情况进行调整。一个好的渐进升级策略应能够平衡新功能的引入、旧功能的废弃以及向下兼容性的维护。 组件库的按需加载实现中存在哪些潜在问题,如何解决?...样式和逻辑分离 样式和逻辑结合 样式和逻辑关联 开发打包流程 中等 简单 复杂 输出文件 JS 文件和 CSS 文件 JS 文件 JS 文件和 CSS 文件 使用方法 分别引入 JS 和 CSS 只引入...样式编译复杂。 设计一个组件库的 CI/CD 和发布流程。 可以参考antd 当你设计一个组件库的 CI/CD 和发布流程时，可以考虑以下步骤： 1.

    1.4K63

    软技能提升：转转中后台规范落地实践

    如何落地？ 2.1 技术方案 开发前，我们在技术选型和技术设计时通常会有调研某类技术或者项目设计方案，但我们通常选择完后，没有的文档的输出，以至于出现重复调研或“时间久了，忘记了”这种现象。...## 在实践 Demo 中遇到的典型问题 - 阐述：问题 && 原因 && 解决方案 ## 最终选择该方案的亮点 - 阐述目前方案的较业界的优点，或者说优化了某个缺点 - 可以从复用性，功能/兼容性等角度...├── global.less // [必选] 需要重置的样式或者全局样式引用 ├── layouts // [可选]...转转的 ESlint 配置基于 Standard 规则的基础上做了特定的修改。...当然，规范化，并不是说定好后就能立马彻底解决以上所有痛点，而是优先针对增量的项目进行规范，逐步的积累我们的公共基础能力，提高可复用和可维护性。

    90431

    腾讯 Web UI 解决方案 QMUI Web : 探索与沉淀

    命名空间作为一种基础的隔离，把组件与业务，以及不同的业务之间的 Class-name 命名隔离开来，避免冲突，而后父子元素之间逐级展开编写，保证了项目内多人协助不易冲突，同时命名带有语义，也方便理解和阅读...，如何处理跨项目组件就成为了一个问题。...Sass 文件中，配合全局的颜色变量、字体变量等变量，就可以做到跨项目抽取组件，每个新项目只需要关注具体 UI 表现而无需再处理各种常见的 UI 问题，同时方便地通过调整这些变量的值而快速修改整个项目的样式...基础配置与组件 前文提到，框架中会有一份配置表，是各种 Sass 的变量，这些变量控制了一个网页基本的字体样式，链接颜色，通用组件的样式配置等基础样式，在创建一个新项目时，应该先根据设计稿配置好这些信息...例如下图中这些配置属于 QMUI 通用配置，通过修改这些配置则可以快速修改项目的字体策略、正文字体大小，链接颜色等 UI 常用的 CSS 属性。

    2.1K30

    React 日期选择器 Date Picker

    React 生态系统中有许多优秀的日期选择器库，如 react-datepicker 和 antd。...本文将从基础开始，逐步深入介绍如何在 React 应用中使用日期选择器，并探讨常见的问题、易错点及如何避免。...高级用法 自定义样式 react-datepicker 提供了一些默认样式，但有时我们需要自定义样式以适应应用的设计。可以通过覆盖默认样式或使用 CSS-in-JS 库来实现这一点。...解决方案：确保正确引入 react-datepicker 的默认样式，并在必要时覆盖这些样式。可以使用 CSS 模块或 CSS-in-JS 库来管理样式。 2....性能问题 问题：在复杂的应用中，日期选择器可能会导致性能问题，尤其是在频繁更新状态时。 解决方案：使用 useCallback 和 useMemo 钩子来优化性能。

    12810

    React项目实战(React后台管理系统、TypeScript+React18)-环境准备（1）

    用scss做模块化样式管理 Antd的UI组件配置 路由的组件化 路由表旧版写法和新版写法的讲解 管理系统经典三栏布局的解决方案 菜单栏构建及其类型约束 react-redux的手动搭建各个模块的自动生成...只保留 main.tsx 入口文件 App.tsx 顶级组件 其余一些不必要的文件目录可以删除 样式初始化 reset-css 比Normalize.css更加直接去除默认的样式 执行以下命令安装...reset-css npm i reset-css 安装完成之后开始引入 全局引入 打开main.tsx import "reset-css" 正确的样式引入顺序 1：样式初始化一般放在最前...2：ui框架的样式 3：组件的样式 四：scss的安装和使用 SCSS是CSS的一种预处理语言，它是在CSS的基础上增加了变量（variables）、嵌套（nested nutes）、混合（mixin...然后在main.tsx引入 //全局样式 import ".

    67940
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券