【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>

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

原因

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

解决

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

相关推荐
VimorphTech10 小时前
React 任务轮询,为什么不能只写一个 setInterval?
javascript·typescript
lexiangqicheng10 小时前
Docker的沙箱机制是怎样的?
前端·javascript
LCG米12 小时前
STM32 HardFault故障定位实测:压栈帧寄存器解析、CFSR故障源判读与出错地址回溯
前端·javascript·stm32·单片机·嵌入式
持敬chijing13 小时前
白盒测试与代码审计-JS 数据逆向
javascript·网络·安全·web安全·网络安全·网络攻击模型·安全威胁分析
薛一半13 小时前
Redux实战:组件状态管理全解析
开发语言·前端·javascript·react.js
小羊没烦恼!1 天前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
鸿蒙开发1 天前
PDF 盖黑框不等于脱敏:用 PDF.js + Canvas + pdf-lib 实现永久遮盖
前端·react.js
Highcharts.js1 天前
AI图表开发工具Highcharts Assist|自然语言生成图表代码
javascript·人工智能·highcharts·开发神器
志尊宝1 天前
Vue3 零基础每日笔记(087):Vue3 高频面试题(下)
前端·javascript·vue.js·笔记·ecmascript·#vue.js