【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,可以解决刷新、点击等操作下不显示黑边,但不是彻底解决这个问题

相关推荐
Ama_tor1 分钟前
网页制作06-html,css,javascript初认识のhtml如何建立超链接
javascript·css·html
烂蜻蜓21 分钟前
Uniapp 中布局魔法:display 属性
前端·javascript·css·vue.js·uni-app·html
视觉CG38 分钟前
【Viewer.js】vue3封装图片查看器
开发语言·javascript·vue.js
琑951 小时前
nextjs项目搭建——头部导航
开发语言·前端·javascript
Gazer_S2 小时前
【Windows系统node_modules删除失败(EPERM)问题解析与应对方案】
前端·javascript·windows
沙子迷了蜗牛眼2 小时前
antv G6绘制流程图
开发语言·javascript·ecmascript
乌木前端2 小时前
包管理工具lock文件的作用
前端·javascript
Jet_closer_burning2 小时前
Vue2 和 Vue3 的响应式原理对比
前端·javascript·vue.js·html
努力的白熊嗨3 小时前
一文带你搞懂前端大文件上传
前端·javascript
Violet5153 小时前
ECMAScript规范解读——this的判定
javascript