我做了一个自定义<代码><；选择>；编辑行时在TableCell内使用的组件。我还做了一个定制的钩子，可以在组件中使用，以便在组件挂载时将焦点放在给定的元素上。

我的应用程序中，元素接收焦点，但是不应用我用<select>定义的样式。正如我们在动图中所看到的：https：//imgur.com/a/vgy6vns.

时在行上，元素是焦点，但不应用样式。然后，我单击Next Input和Shift+Tab返回到元素，然后应用样式（边框颜色和厚度）。

当我尝试在StackOverflow代码片段中复制该问题时，它会神奇地按照我希望的方式工作。

为什么？我应该注意哪些可能影响是否应用<select>样式的因素？

使用这个黑客解决我的问题，但我想避免它：

:focus-visible

我已经在我的应用程序和代码片段中做了一些控制台日志。默认情况下，两者向element.contentEditable = true; element.focus(); element.contentEditable = false; 和element.contentEditable //inherit提供相同的输出。

我看不出我的应用程序中的内容与代码片段中发生的内容之间有任何明显的区别。

同样，我应该注意哪些因素会影响是否应用<select>样式？这里的区别是什么？

:focus-visible

<代码>.可聚焦{填充：5px；框大小：border-box；位置：相对；高度：30px；宽度：100px；边框：1px实心浅灰色；大纲：无；用户选择：无；背景：绿色；}.可聚焦：在{内容：' '；位置：绝对；顶部：5px；右：5px；宽度：0；高度：0；左边框：3px纯色透明；BORDER-RIGHT：3px实心透明；边框-顶部：5px纯黑色；}.Focusable：焦点{边框：2px纯红色；}.focusable：焦点可见{边框：2px纯蓝色；框-阴影：插入0 0 0 1px蓝色；}

<代码><；script SRC=“ https：//cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js ”>；<；/script>；<；script SRC=“ https：//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js ”>；<；/script>；<；DIV ID=“ root ”>；<；/DIV>；

顺晟科技：