Global styles are leaky

[drwpow]

In styles.css, global elements like a, button, and input have styling that leak into any custom components supplied:

a,
summary,
button,
input,
[tabindex]:not([tabindex='-1']) {
  @apply nx-outline-none;
  &:focus-visible {
    @apply nx-ring-2 nx-ring-primary-200 nx-ring-offset-1 nx-ring-offset-primary-300 dark:nx-ring-primary-800 dark:nx-ring-offset-primary-700;
  }
}

This imposes 2 problems:

1. I have to provide Nextra-specific style overrides for my components (in my case I’m showcasing a design system, and don’t want to have Nextra-specific code shipped to all consumers)
2. For the styles I’m declaring anyway, the Nextra docs have a 0 2 0 specificity that wins out over my 0 1 0 styles (note this only happens in dark mode with :is(html[class~="dark"] input:focus-visible), but our docs/site are all in dark mode)

If we fix this, it will fix issues for anyone writing docs in Nextra for their design system.

[flanagankp]

This is also a problem that I'm running into with Nextra and is fairly frustrating. The global button style is really breaking my integration with NextUI as a component library

[dimaMachina]

closed by https://github.com/shuding/nextra/pull/3220 and https://github.com/shuding/nextra/pull/3248, use https://github.com/shuding/nextra/releases/tag/nextra-theme-docs%403.0.0-alpha.39