如何禁用React-Beautiful-DND shift+click时聚焦可拖拽项的默认轮廓

这个轮廓是react-beautiful-dnd内置的选区激活聚焦样式，Shift点击触发多选逻辑时组件会自动给拖拽项挂聚焦态，调用浏览器默认的outline渲染，你当前的样式没覆盖到聚焦状态的规则，所以不生效。

解决方案 #

1. 直接在Card组件的sx样式中补全覆盖规则 #

你现在的Card样式只写了默认态的属性，没有覆盖聚焦相关的伪类，在sx配置里追加以下规则即可：

sx={{
  display: "flex",
  flexDirection: "column",
  justifyContent: "space-between",
  height: 60,
  width: 400,
  marginTop: 1,
  alignItems: "center",
  backgroundColor: selected ? theme.palette.third.main : "white",
  // 追加以下三行，覆盖所有触发轮廓的状态
  outline: "none",
  "&:focus": { outline: "none" },
  "&:focus-visible": { outline: "none" }
}}

2. 全局样式覆盖（第一种方案不生效时用） #

如果上述写法因为样式优先级问题没生效，直接在全局CSS文件中覆盖react-beautiful-dnd的默认类样式即可：

.react-beautiful-dnd-draggable:focus,
.react-beautiful-dnd-draggable:active,
.react-beautiful-dnd-draggable:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

无障碍提示 #

不建议直接完全移除聚焦态提示，如果要兼顾可访问性，可以把默认的浏览器轮廓换成项目统一的自定义聚焦样式，比如：

"&:focus-visible": {
  outline: "none",
  boxShadow: `0 0 0 2px ${theme.palette.primary.main}`
}

内容的提问来源于stack exchange，提问作者David Haas