【React】Ant Design 5.x版本drawer抽屉黑边问题

假意诗人2024-09-25 14:07

环境

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