时间戳

首页 > 解决方案 > CSS焦点轮廓没有被焦点可见的polyfill删除[NextJS]

javascript - CSS焦点轮廓没有被焦点可见的polyfill删除[NextJS]

问题描述

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

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

_app.jsfocus-visible 按页面加载

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;
}

演示：焦点可见在单击时删除 create-react-app 上的轮廓

截图来自 2020-06-22 21-47-37

演示：单击时焦点可见无法删除 NextJS 上的轮廓

截图来自 2020-06-22 21-46-28

标签： javascripthtmlcssreactjsnext.js

解决方案

问题不在于 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>

推荐阅读