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

相关推荐
寒水馨20 分钟前
macOS下载、安装electron-v43.2.0(附安装包electron-v43.2.0-darwin-arm64.zip)
javascript·macos·electron·node.js·跨平台·桌面应用开发·开源框架
不好听61342 分钟前
React 父子组件通信:从 Todo 应用理解单向数据流
前端·react.js
光影少年1 小时前
RN 路由栈管理、页面销毁、返回拦截
javascript·react native·react.js
_lucas1 小时前
做了一个glsl在线调试工具
前端·javascript·three.js
To_OC9 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
小林ixn11 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
窝子面13 小时前
手搓最简前后端协作-node
javascript·数据库
qetfw13 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
kyriewen14 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程
এ慕ོ冬℘゜14 小时前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript