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

相关推荐
CaliXz6 分钟前
取出51.la统计表格内容为json数据 api
java·javascript·json
Rysxt_6 分钟前
Vue 集成富文本编辑器教程
前端·javascript·vue.js·富文本
开发者小天9 分钟前
React中的受控组件示例
前端·javascript·react.js
奋斗吧程序媛10 分钟前
request请求相关
前端·javascript·vue.js
克喵的水银蛇18 分钟前
Flutter 通用列表项封装实战:适配多场景的 ListItemWidget
前端·javascript·flutter
Howie Zphile19 分钟前
做移动端的 Next.js 项目,可以选哪些 UI?
开发语言·javascript·ui
WX-bisheyuange20 分钟前
基于Spring Boot的宠物商城网站设计与实现
前端·javascript·vue.js·毕业设计
苏打水com26 分钟前
第四篇:Day10-12 JS事件进阶+CSS动画——实现“复杂交互+视觉动效”(对标职场“用户体验优化”需求)
javascript·css·交互
初遇你时动了情26 分钟前
react native实战项目 瀑布流、菜单吸顶、grid菜单、自定义背景图、tabbar底部菜单、轮播图
javascript·react native·react.js
BD_Marathon29 分钟前
【JavaWeb】JavaScript使用var声明变量的特点
javascript