【React】解决antd样式没有显示问题（网页频闪问题）

最新推荐文章于 2024-07-07 11:19:43 发布
最新推荐文章于 2024-07-07 11:19:43 发布
阅读量1.5k 收藏 1
点赞数 2
分类专栏： React与Vue 文章标签： javascript antd react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47109503/article/details/121643074
版权

问题详情

最近需要使用Ant Design UI库创建项目，已经创建了五、六次项目了，每次创建项目耗时久、删项目又麻烦不说，展示效果并没有显示antd的样式，整个网页出现不停频闪效果，示例如下：
在这里插入图片描述

解决方法

忘记在App.css文件最前方加入一句：

@import "~antd/dist/antd.css";

很难忘的两天，故记录一下，警示下次不会再犯

Sco_Jing1031
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
React使用antd的Steps控件的问题
qq_16256793的专栏
06-11 8291
项目所使用的是antd 2.x版本，由于业务需要，弄一个进度条，使用Steps控件来实现目标的实现效果：需要的效果就是，竖着的，点状的步骤，并且文字都是可以点击的但是在使用Steps控件的过程中，因为需要竖着的，但是在查看antd使用的时候，使用codePen来实现竖着点状步骤是可以的，但是在项目中变成了这样找了很久，没有找到原因，所有就把Steps的style覆盖掉了:global { .a...
antd Upload组件使用，出现闪动问题
qq_37766810的博客
12-22 2455
antd upload 闪动
NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题
最新发布
Zong_0915的博客
07-07 407
NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题
react ant-design Select组件下拉框map不显示问题
wangxu000000的博客
08-24 1397
问题描述：在使用Select Option下拉组件时，map遍历后不显示下拉框 错误写法： {dataList && dataList.map(item =>{( <Option key={item.id} value={item.value}>{item.value}</Option )})} 正确写法： {dataList && dataList.map(item =>( <Option k...
【React】antd轮播图走马灯解决闪屏办法
不忘初心，坚定道路！
03-16 4193
前言 antd这个走马灯使用很频繁，但使用过程中，会发现它有个闪屏过程。 经过打断点发现，导致闪屏原因有2个： 一，外层容器未设高度。如果外层容器未设置高度，那么每次加载时，所有需要放入走马灯的图片都会以纵向排布方式排完后再进行组装成轮播图样子。这样首次渲染的布局也会打乱。 二、图片顺序不对。当设定外层容器高度后，每次加载时，第一张需要显示的图片并不是其排列的图片，导致图片一闪而过的花屏。 解...
antd timepicker时间选择器在IE浏览器左上角闪现问题修复方法
游逸的博客
06-16 1438
在前端使用antd开发过程中遇到一个很奇怪的问题，使用的timepicker时间控件，在IE浏览器下打开下拉选择时间时，页面左上角会闪现一下时间选择框，如下图： 检查了一遍代码发现没有问题，怀疑是环境问题，排查下来发现是使用的antd旧版本timepicker组件导致，更换timepicker包即可。 关注公众号【逸游源码汇】，回复【时间选择器】获取下载链接，使用方法：复制到项目node_modules文件夹下，替换原文件即可。 我的公众号【逸游源码汇】，主要分享技术干货与前沿资讯，欢迎关注！ 作者简介：
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
react-admin：React + AntD后台管理系统解决方案
02-05
欢迎使用后台管理系统解决方案本项目是针对（后台人员）或（扩展人员）或快速构建后台管理系统而创建项目过老。 最近更新 升级所有模块到最新,近期会陆续更新 依赖模块 项目是用create-react-app创建的，主要还是列...
React+antd后台管理系统模板
12-01
React+antd后台管理系统模板是一个利用React前端框架和antd UI库构建的管理界面示例项目。这个模板主要用于开发者熟悉React和antd组件库的使用，同时也展示了如何在React应用中集成react-router进行页面路由管理。让...
webpack+react+antd脚手架优化的方法
08-27
Webpack+React+Antd脚手架优化方法 本篇文章主要介绍了Webpack+React+Antd脚手架优化的方法，旨在提高项目的打包性能和开发效率。下面将详细讲解每个优化方法的实现细节。 样式分离 样式分离是将CSS、LESS、SASS...
react实现antd线上主题动态切换功能
10-16
主要介绍了react实现antd线上主题动态切换功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
ant-virtual-table:这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的AntDesign表。考虑到兼容性问题，内部通过监听表的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。的throttle处理毒性问题，目前没有采用raf
03-11
蚂蚁虚拟表 |简体中文 这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件表保持一致的，可以让你实例中处理渲染1000万条数据，页面也非常流畅。 设计说明 考虑到兼容性问题，内部通过侦听表的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。另外组件约会loash的节流处理问题，目前没有采用raf React抗虚拟表 安装 npm install ant-virtual-table --save-dev 用法 例子 import React, { Component, Fragment } from 'react' import { VirtualTable } from 'ant-virtual-table' import 'antd/d
react +antd table 滚动事件实现防抖
m0_50981596的博客
11-28 935
react +antd table 滚动事件实现防抖
react，antd的Tabs，切换闪动问题，动画效果从前一个tag到新点击tag反复滑动
nuanzhu的博客
03-26 5899
公司项目，用的antd+umi，所以UI库直接用的antd的。 其中，有一个页面的Tabs出现以上问题，排查过组件使用、修改过动画效果，都无用。 最后发现和tab本身没关系，不是各种引入冲突。 是因为每个tab页有好几个接口请求，每个都会触发render刷新，而tab切换时，active值因为存在state里，因此数据变化也会触发render加载，因此会出现多次render加载，也导致...
【踩坑笔记】Antd在移动端样式没有显示
xwmisc的博客
12-23 1421
Antd项目使用React+Antd+cra脚手架开发，在PC端Antd样式正常，但是在移动端却失效不显示，经过调研发现新版本Antd没有dist/antd.css文件，最终解决方案是在App.tsx里import “antd/dist/reset.css”，即可解决Antd样式的问题。
React Next.js antd 首屏闪烁,样式不稳定的bug
未将对象引用设置到对象的实例
03-14 3248
说明 Next.js + Ant Design 的html渲染后, 各种css样式会经历从无到有的一个过程. 造成了闪烁的感觉, 体验很差. 解决方案 https://github.com/ant-design/ant-design/issues/16037
bootstrap打开模态滚动条modal窗口引起页面抖动解决办法
H5爱好者
07-05 4771
bootstrap打开模态modal窗口引起页面抖动解决办法。在使用bootstrap的modal模态窗口组件时，触发后会发现页面有抖动现象。这是因为它隐藏了浏览器滚动条，页面就相当于变宽了，关闭模态窗口后，页面又出现滚动条，页面又变窄了，这一伸一缩就会使页面产生抖动现象。我的解决方法很简单，就是干掉隐藏滚动条的代码。总共删除bootstrap.js文件中6行代码就可以了。
TS 结合 Antd 使用时，部分组件的样式（例如 RangePick）出现问题
浮沉半生的博客
05-31 2647
问题 TS 结合 Antd 使用时，部分组件的样式（例如 RangePick）出现问题。 解决办法 将 tsconfig.json 中的 module属性修改为：es2015。"module": "es2015" 将 babel 配置添加到 ts 和 tsx 的文件解析中。 { test: /\.(ts|tsx)$/, include: path.resolve(_...
react 引入antd样式
06-06
要在 React 项目中引入 antd 样式，你需要执行以下步骤： 1. 安装 antd：`npm install antd --save` 2. 在你的 React 组件中引入 antd 样式文件：`import 'antd/dist/antd.css';` 3. 在你的组件中使用 antd 组件...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值