CSS focus outline not removed with focus-visible polyfill [NextJS]

Question

I'm using focus-visible polyfill, that way mouse events on clickable elements such as button won't trigger the focus outline.

However on NextJS, a Server Side Render Framework, the focus outline still appears when clicking on button elements. I've used this library in client frameworks such as create-react-app, and I had no issues.

focus-visible is loaded by _app.js page

import "focus-visible";

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

export default MyApp;

Tried loading focus-visible inside _document.js page, didn't make a difference.

The css used by both demos.

// 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

The issue wasn't with NextJS but the scoped CSS library styled-jsx.

The solution was using the one-off global selector.

For some reason using the Global style fails, but using the one-off global selector works.

Global style fails

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

But One-off global selector works

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

Answer 2

Use <a href="abc.com" class="abc"> instead of <button>