记录升级andproV5以后遇到的样式问题不兼容部分浏览器

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量614 收藏
点赞数 3
分类专栏： react 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43933139/article/details/129187758
版权
官方弃用antd.css改用CSS-in-JS导致部分浏览器样式异常。通过审查元素，发现类名相似，作者复制了antd.css到V5项目并引入，虽然有微调但基本功能可用，提供了一个临时的解决方法。
摘要由CSDN通过智能技术生成

在这里插入图片描述

官方说了 不再支持antd.css 而是采用了CSS-in-JS

看一下在谷歌浏览器的表现 一切正常
在这里插入图片描述
在看看部分浏览器 样式全无
在这里插入图片描述
这咋办呢？肯定不能交差啊

细心的我审查了一下元素
在这里插入图片描述

发现 类名和之前的是差不多一致的
那么 我是不是可以引入之前的antd.css呢
在这里插入图片描述

把这个文件copy到你的v5项目中 在app.js中引入
在这里插入图片描述
保存 等待项目重启
看结果
在这里插入图片描述
完事 虽然有点不太一样 圆角有调整 但 也不是不能接受 对吧
好了 收工 ^_^

且菜且折腾
关注
专栏目录
Ant Design Pro 兼容性问题
Veni的博客
08-31 1万+
支持环境：现代浏览器和 IE9 及以上（需要 polyfills）。 一：组件 1.Flex 布局 现代浏览器支持 2.Upload 上传 beforeUpload：上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。注意：IE9 不支持该...
解决 Ant Design V5 样式兼容问题
徐同保的专栏
08-15 1052
解决 Ant Design V5 样式兼容问题
react+ant design,如果升级antd版本，导致样式不生效解决方案
qq_27010291的博客
03-05 2114
升级antd，我用的命令是： npm i antd@4.17.0 --save 其中@号后面是升级的版本号， 本地用的是yarn，在项目的根如今下重新加载命令 yarn install 然后查看pakeage.json文件 启动项目之后，如果发现新增加的一些不生效，可能是对自定义的主题没有更新 需要执行命令：yarn theme（非常重要） 然后再启动项目，就生效了， ...
React使用antd-mobile的版本问题（v5和v2的转换）
weixin_51601829的博客
04-29 3720
在翻看之前的学习视频时，发现视频教学的是antd-mobile v2版本，但是现在最新的已经是v5版本，在官网文档中所说：v5 是完全重写的一个版本，所以 v2 和 v5 的差异非常之大，其实不存在所谓的"迁移"，基本是替换为一套全新的组件。 所以如果想使用v2版本的话，是必须在v5版本下迁移的， 在官网中也有提到两种方法，我使用的是第一种方法： 方法一：使用 antd-mobile-v2（推荐） 我们为 v2 发布了一个单独的影子 npm 包：antd-mobile-v2，你可以先将原来项目中 v2 版本
antd5.0版本在74版本的谷歌浏览器中样式失效是为什么
weixin_35756892的博客
02-11 1705
Ant Design 5.0版本在74版本的谷歌浏览器中样式失效的原因可能是因为： 浏览器的兼容性问题：不同版本的浏览器对于CSS和JavaScript的支持情况有所差异，有时候会导致样式显示不正常。 库版本不兼容：不同版本的Ant Design库之间可能存在兼容性问题，在使用较老版本的浏览器时可能导致样式失效。 代码错误：如果使用了错误的代码，可能导致样式失效。 建议使用较新版本的浏览...
浅谈antd5兼容
欢迎来到☆槿畔☆的博客
04-06 3947
antd5的兼容性。。。
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)
weixin_34101784的博客
08-13 891
起因 某天，某测试说：“这个页面在 IE8 下白屏，9也白。。” 某前端开发: 吭哧吭哧。。。一上午的时间就过去了，搞定了。 第二天，某测试说：“IE 又白了。。” 某前端开发: 吭哧吭哧。。。谁用的 Object.assign，出来我保证削不屎你。 原谅我不禁又黑了一把 IE。 有人可能会想，都要淘汰了，还有什么好讲的？ 也许几年后，确实没用了，但目...
【Tailwindcss + ant design】样式不兼容问题解决
weixin_51076986的博客
08-29 1852
今天遇到了一个问题，复现页面代码的时候，不断调整 ant design icon 的 className 与 style，但是都没有效果。修改完成以后，tailwind 就和 ant design 的基本样式不冲突了，也可以使用 tailwind 给 antd 组件编写样式了。后面了解到，如果需要既使用 tailwind 编写样式，也使用 ant design 的组件，就需要把 tailwind 的默认样式关闭。打开 tailwindcss 的配置文件 tailwind.config.ts。
antd5 样式覆盖
m0_67182331的博客
05-25 904
通过在app外层添加配置后，可以使用:global +and的类名 进行覆盖。如果项目又做样式冲突隔离，记得加上项目样式前缀，浏览器的调试工具有显示。-----over---记录下踩坑经历。
antd 组件css的浏览器兼容性解决方案
h666000的博客
05-23 2617
最近写了几个后台管理，用的antd5最新版。开始都一切正常，直到测试提到360浏览器的样式有问题。才发现antd5的样式全部添加了css新语法，360浏览器完全不认识。详情请戳：https://ant.design/docs/react/compatible-style-cn以上是用where的兼容解决情况。
ant-design-vue 4.x升级问题-样式丢失问题
前端
08-05 4001
该文档是在升级ant-design-vue到4.x版本的时候遇到的问题。
react引入antd报错找不到antd/dist/antd.css Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in
热门推荐
weixin_51867622的博客
11-19 1万+
Failed to compile. Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'D:\develop\file\react-file\exercise\react-pc-142\src' ERROR in ./src/index.js 9:0-28 Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'D:\develop\file\re
Ant Design兼容性问题
weixin_35750953的博客
12-21 1605
Ant Design 是一个优秀的 React 组件库，它提供了丰富的组件和专业的设计规范，可以帮助开发者快速构建优美的用户界面。 Ant Design 的兼容性一般较好，支持最新版本的 Chrome、Firefox、Safari、Edge 和 Internet Explorer 11 等浏览器。 如果你在使用 Ant Design 遇到兼容性问题，可以尝试使用 polyfill 库来解决。pol...
react安装依赖引入报错
执笔绘江山的博客
11-26 3272
在react脚手架中，使用npm add antd安装最新的依赖以后，再使用import 'antd/dist/antd.css'全局引入会报错，报错原因显示为： Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'C:\Users\26396\Desktop\react-project\src' 这时进入下载的antd依赖文件中查看会发现找不到antd.css的文件，原因是使用默认add antd下载的是最新版本的依赖文件，如
react项目antd css样式生效问题
mp_sunny
11-14 8288
刚开始我们在react项目里执行：yarn add antd时，我们在页面里引入button按钮时是不生效的，那该怎么办呢？ 第一种办法：就是在我们自己less文件里面输入 @import "~antd/dist/antd.less"; 然后，每个css样式都要引入那个含有这句话的less文件； 第二种办法：babel-plugin-import插件 输入：npm i babel-plugi...
360兼容模式，搜狗等奇葩浏览器下无法正常渲染的问题
云海青简台
11-07 1775
近日，通过朋友接到一个游戏官网的项目，对方需要兼容主流浏览器。 当时并没有多想，结果项目交付后对方提出360兼容模式下样式错乱。 因为最近几年在做移动端项目，偶尔web项目也只需要chrome，ff，ie9+兼容。 对于360浏览器也不熟悉，遂度娘之。 经过测试，只需增加如下meta标签即可。 or 在360官方论坛看到有开发人员提供的方法，
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 1136
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 894
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值