当前位置： 首页 > article >正文

【React】Ant Design 5.x版本drawer抽屉黑边问题

article 2024/11/19 18:36:33

环境

  • antd: ^5.14.1
  • react: ^18

问题情况

<Drawer open={open} closable={false} mask={false} width={680}
		getContainer={props.getContainer || undefined}>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
</Drawer>

在这里插入图片描述
此时mask是false，也就是不需要蒙蔽状态下，刷新页面会发现多出一个黑边，鼠标点击后又消失了；

原因

原因是谷歌浏览器的:focus-visible样式设定
在这里插入图片描述

解决

将组件的autoFocus属性设为false，可以解决刷新、点击等操作下不显示黑边，但不是彻底解决这个问题
在这里插入图片描述


http://www.kler.cn/a/325889.html

相关文章：

  • uniapp微信小程序转发跳转指定页面
  • Spring 与 Spring MVC 与 Spring Boot三者之间的区别与联系
  • 如何在MindMaster思维导图中制作PPT课件？
  • 经验笔记：Git 基础操作指南
  • 【流量分析】常见webshell流量分析
  • latex中，两个相邻的表格，怎样留一定的空白
  • 利用ChatGPT实现的生成式人工智能自动化控制系统
  • RabbitMQ的高级特性-限流
  • 英集芯IP5911：集成锂电池充电管理和检测唤醒功能的低功耗8位MCU芯片
  • axios proxy 和 httpsAgent 的使用差异案例详解
  • Vue发送邮件攻略：从搭建到实现详细步骤？
  • asp.net mvc core 路由约束,数据标记DataTokens
  • elasticsearch基础知识、go如何操作elasticsearch
  • EP41 我的评分和我的下载公用分类列表
  • C++游戏开发详解：从入门到实践
  • 解决 Sqoop 导入 Hive 时时间字段精度丢失问题
  • 字母象形：十分有趣的单词扩展逻辑
  • Linux基础（四）：文件权限与目录配置
  • vulhub Jboss 漏洞攻略
  • 华为OD真题机试-英文输入法（Java）
  • MySQL9个连接：left join、inner join等
  • RabbitMQ常用管理命令及管理后台
  • 深度学习推理的技术实现与优化策略
  • 达梦数据库导入导出统计信息
  • 【tower-boot 系列】开源RocketMQ和阿里云rockerMq 4.x和5.x集成 (一)
  • C#中实现压缩包（如ZIP）的解压功能