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

环境

  • antd: ^5.14.1
  • react: ^18

问题情况

javascript 复制代码
<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>

此时maskfalse,也就是不需要蒙蔽状态下,刷新页面会发现多出一个黑边,鼠标点击后又消失了;

原因

原因是谷歌浏览器的:focus-visible样式设定

解决

将组件的autoFocus属性设为false,可以解决刷新、点击等操作下不显示黑边,但不是彻底解决这个问题

相关推荐
Bl_a_ck15 分钟前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
为美好的生活献上中指42 分钟前
java每日精进 5.11【WebSocket】
java·javascript·css·网络·sql·websocket·网络协议
寧笙(Lycode)2 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架
拖孩2 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
苹果电脑的鑫鑫2 小时前
element中表格文字剧中可以使用的属性
javascript·vue.js·elementui
一丝晨光3 小时前
数值溢出保护?数值溢出应该是多少?Swift如何让整数计算溢出不抛出异常?类型最大值和最小值?
java·javascript·c++·rust·go·c·swift
Wannaer3 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js
懒羊羊我小弟4 小时前
手写符合Promise/A+规范的Promise类
前端·javascript
赵大仁4 小时前
React vs Vue:点击外部事件处理的对比与实现
javascript·vue.js·react.js
肥肥呀呀呀5 小时前
在Flutter上如何实现按钮的拖拽效果
前端·javascript·flutter