未使用焦点删除CSS焦点轮廓-可见多边形填充[NextJS]

Question

我使用的是focus-visible polyfill，这样可点击元素(如button )上的鼠标事件不会触发焦点轮廓。

然而，在服务器端渲染框架NextJS上，当单击按钮元素时，焦点轮廓仍然会出现。我已经在客户端框架中使用过这个库，比如create-react-app，我没有遇到任何问题。

focus-visible由_app.js页面加载

import "focus-visible";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

尝试加载焦点-在_document.js页面内可见，没有什么不同。

两个演示使用的css。

// removes outline when clicking
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

button {
  display: block;
  cursor: pointer;
  border: none;
  background: #ccc;
  margin: 10px 0;
}

// displays when focusing with keyboard
button.focus-visible {
  color: red;
  outline: 1px solid red;
}

Demo: focus-visible removes outline on create-react-app upon clicking

​

​

Demo: focus-visible fails to remove outline on NextJS upon clicking

​

​

Answer 1

问题不在于NextJS，而在于限定了作用域的CSS库styled-jsx。

解决方案是使用一次性全局选择器。

由于某些原因，使用全局样式失败，但使用一次性全局选择器工作。

全局样式失败

<style jsx global>{`
  .js-focus-visible :focus:not(.focus-visible) {
    outline: none;
  }
`}</style>

但是一次性的全局选择器是有效的

<style jsx>{`
  :global(.js-focus-visible) :focus:not(.focus-visible) {
    outline: none;
  }
`}</style>

Answer 2

使用<a href="abc.com" class="abc">而不是<button>