Глобальные стили

:global(…)

Чтобы применить стили к одному селектору глобально, используйте модификатор :global(...):

<style>
  :global(body) {
    /* применяется к <body> */
    margin: 0;
  }

  div :global(strong) {
    /* применяется ко всем элементам <strong> в любом компоненте,
        которые находятся внутри элементов <div>,
        принадлежащих этому компоненту */
    color: goldenrod;
  }

  p:global(.big.red) {
    /* применяется ко всем элементам <p>,
        принадлежащим этому компоненту,
        с `class="big red"`, даже если он применяется
        программно (например, библиотекой) */
  }
</style>

Если вы хотите создать @keyframes, которые будут доступны глобально, вам нужно добавить префикс -global- к именам ваших ключевых кадров.

Часть -global- будет удалена при компиляции, и ключевые кадры затем будут ссылаться просто как my-animation-name в других местах вашего кода.

<style>
  @keyframes -global-my-animation-name {
    /* ваш код */
  }
</style>

:global

Чтобы применить стили к группе селекторов глобально, создайте блок :global {...}:

<style>
  :global {
    /* применяется к каждому элементу <div> в вашем приложении */
    div { ... }

    /* применяется к каждому элементу <p> в вашем приложении */
    p { ... }
  }

  .a :global {
    /* применяется к каждому элементу `.b .c .d`, в любом компоненте,
        который находится внутри элемента `.a` в этом компоненте */
    .b .c .d {...}
  }
</style>