使用react-draggable实现Modal拖拽功能时如何彻底去除边框？

你遇到的边框本质是元素聚焦时的默认轮廓（outline），不是你设置的border属性。浏览器会给可交互、可聚焦元素默认添加聚焦轮廓，react-draggable会自动给拖拽子元素添加可聚焦属性，所以会出现该边框，按以下步骤修改即可：

步骤1：修改dragWrapper样式，覆盖默认聚焦样式 #

更新style.js里的dragWrapper配置，额外去除聚焦状态下的outline和boxShadow：

const useStyles = makeStyles({
  dragWrapper: {
    border: 'none',
    cursor: 'move',
    outline: 'none !important',
    // 覆盖所有可能触发边框的交互状态
    '&:focus, &:focus-visible, &:active': {
      outline: 'none !important',
      boxShadow: 'none !important'
    }
  },
  // 新增Modal专属样式，去除Modal本身的默认边框
  noBorderModal: {
    outline: 'none !important',
    '&:focus, &:focus-visible': {
      outline: 'none !important',
      boxShadow: 'none !important'
    }
  }
})

步骤2：给Modal绑定新增的样式 #

在组件中给Modal元素添加自定义的noBorderModal类名：

import Draggable from 'react-draggable'

<Draggable>
   <div className={classes.dragWrapper}>
      <Modal className={classes.noBorderModal}>
         <ProfileForm>
           ...
         </ProfileForm>
      </Modal>
   </div>
</Draggable>

可选补充操作 #

如果修改后边框仍然存在，可以通过浏览器开发者工具的元素选择器，选中显示边框的DOM节点，查看计算样式中的outline、border、boxShadow属性，确认是哪个规则生成的边框，针对性添加覆盖样式即可。

内容的提问来源于stack exchange，提问作者Shruthi R