如何移除Slate.js编辑器的蓝色聚焦轮廓（焦点环）

嘿，我来帮你搞定这个问题！Slate.js的Editable组件默认会带上浏览器的原生焦点样式，也就是你看到的那个蓝色环，要去掉它其实有几种简单又靠谱的方法，看你哪种顺手：

• 方法一：内联样式直接覆盖
  最快速的方式就是给Editable组件直接加style属性，把默认的轮廓和阴影都设为none，一步到位干掉样式：

  <Slate editor={editor} value={initialValue}>
    <Editable
      style={{ outline: 'none', boxShadow: 'none' }}
      // 你的其他props...
    />
  </Slate>
  

  这种方式适合快速测试或者单个编辑器的场景，不用额外写CSS文件。

• 方法二：用CSS类做样式分离
  如果你的项目习惯把样式抽离管理，那就给Editable加个自定义类名，再写对应的聚焦样式：
  先给组件绑定类名：

  <Slate editor={editor} value={initialValue}>
    <Editable
      className="custom-slate-editor"
      // 你的其他props...
    />
  </Slate>
  

  然后在CSS文件里写：

  .custom-slate-editor:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  

  这里的!important是为了确保能覆盖Slate或浏览器的默认样式，要是不加也能生效的话，去掉也完全没问题。

• 方法三：全局统一修改所有Slate编辑器
  如果你项目里所有Slate编辑器都要去掉这个焦点环，可以用Slate自带的属性选择器来全局设置：

  [data-slate-editor] :focus {
    outline: none;
    box-shadow: none;
  }
  

  不过要注意，这个规则会影响所有Slate编辑器，别不小心把其他需要焦点提示的元素也改了哦！

最后提个小建议：如果你的项目需要考虑可访问性（比如依赖键盘导航的用户），最好不要完全去掉焦点提示，可以换成更柔和的自定义样式，比如：

.custom-slate-editor:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

这样既不会像默认样式那么突兀，又能让键盘用户清楚知道当前焦点在哪里～

内容来源于stack exchange