如何移除react-moveable组件中可移动元素的蓝色边框

react-moveable的默认蓝色边框是库自动生成的辅助选区元素，不是直接加在你的目标img或父div上的，所以直接给自己的组件加border: none !important这类样式没用，得针对库生成的特定元素或用组件自带属性处理：

• 方法一：全局CSS覆盖
  在全局样式文件（比如index.css）里添加以下代码：

  /* 隐藏选区边框 */
  .moveable-outline {
    border: none !important;
    outline: none !important;
  }
  /* 如果拖动时出现蓝色虚线辅助线，也一起隐藏 */
  .moveable-line {
    display: none !important;
  }
  

• 方法二：用组件自带属性自定义样式（推荐）
  react-moveable提供了outlineProps和lineProps属性，可以直接在组件上配置样式，不用依赖!important：

  <div id="div element">
    <Moveable
      draggable={true}
      origin={false}
      target={pieceImage}
      // 自定义选区边框样式，直接隐藏
      outlineProps={{
        style: {
          border: "none",
          outline: "none"
        }
      }}
      // 隐藏拖动时的辅助虚线
      lineProps={{
        style: {
          display: "none"
        }
      }}
    />
    <img
      ref={pieceImage}
      src={pieceGraphics}
      alt="img element"
    />
  </div>
  

• 方法三：直接关闭选区显示
  如果完全不需要选区的视觉反馈，可以直接禁用outline：

  <Moveable
    draggable={true}
    origin={false}
    target={pieceImage}
    outline={false} // 直接关闭选区边框
  />
  

内容的提问来源于stack exchange，提问作者PŁASKA ZIEMIA