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

相关推荐
遥遥晚风点点10 分钟前
Spark导出数据文件到HDFS
前端·javascript·ajax
克里斯蒂亚诺更新44 分钟前
微信小程序 点击某个marker改变其大小
开发语言·前端·javascript
顾安r2 小时前
11.14 脚本网页 迷宫逃离
服务器·javascript·游戏·flask·html
顾安r2 小时前
11.14 脚本网页游戏 猜黑红
前端·javascript·游戏·flask·html
@菜菜_达3 小时前
interact.js 前端拖拽插件
开发语言·前端·javascript
一个假的前端男4 小时前
uniapp 3端轮播
前端·javascript·uni-app
心随雨下5 小时前
Flutter Material 3设计语言详解
javascript·flutter·设计语言
一路向北North6 小时前
网页版预编译SQL转换工具
前端·javascript·sql
把csdn当日记本的菜鸡7 小时前
js查缺补漏
开发语言·javascript·ecmascript
zhangyao9403307 小时前
uni-app scroll-view特定情况下运用
前端·javascript·uni-app