Перемещение глобальных таблиц стилей над компонентами styled в <head> - PullRequest
Новая
       22

Перемещение глобальных таблиц стилей над компонентами styled в <head>

1 голос
/ 04 апреля 2019

Я сейчас import использую CSS-файлы в одном из моих компонентов.Эти таблицы стилей добавляются как link теги в <head> и будут доступны по всему миру: 

import './src/styles/normalize.module.css';

Я также использую styled-components .

В настоящее время теги link, сгенерированные глобальными CSS import, располагаются ниже тегов styled-component style, в <head>:

image">

Мне бы хотелось, чтобы styleled-компоненты были более специфичными, то есть отображались над тегами link из CSSimport s.

Есть ли способ сделать это?

PS: я использую GatsbyJS, но это, вероятно, не относится к вопросу.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

У Гэтсби есть место, где вы можете контролировать порядок тегов в компонентах головы, это onPreRenderHTML.

Однако я немного повозился с ним, и это не былополезно, поскольку импортированный css не был извлечен во время разработки, и компонент стиля gatsby, похоже, не прикрепил свой тег стиля к этому хуку.в этом документе.

  • импортировать глобальные CSS в gatsby-browser.js.Похоже, что импортированные стили там были подобраны вначале
  • Пусть стилевые компоненты обрабатывают глобальный стиль через createGlobalStyle (Это не всегда возможно, если вы используете стороннюю CSS).
0 голосов
/ 12 апреля 2019

Если у вас есть что-то вроде этого макета, попробуйте импортировать ваш глобальный внутри <App />

<ThemeProvider theme={theme}>
   <App />
</ThemeProvider>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...