Почему мои GlobalStyles не работают после развертывания со стилизованными компонентами? - PullRequest
Новая
       14

Почему мои GlobalStyles не работают после развертывания со стилизованными компонентами?

0 голосов
/ 23 февраля 2019

Я использую React, Redux, стилизованные компоненты и страницы GitHub с моим приложением.

Глобальные стили работают в разработке, но не применяются после развертывания на страницах GitHub.

напримерв App.js 

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
   body {
      @import url("https://fonts.googleapis.com/css?family=Quicksand");
      color: red;
   }
`

const App = () => (
   <React.Fragment>
      <GlobalStyle />
      <Provider store={store}>
         <Router>
            <div>
              //REST OF APP
            </div>
         </Router>
      </Provider>
   </React.Fragment>
);

export default App;

Ответы [ 5 ]

0 голосов
/ 02 августа 2019

У меня была та же проблема, когда я начал развертывать производственную сборку приложения React, в которой используются шрифты Google.Затем я обнаружил этот удивительный проект: https://github.com/KyleAMathews/typefaces. Он содержит всех шрифтов Google и делает их доступными через NPM.

По сути, все, что мне нужно было сделать, это 

npm install typeface-pt-mono --save

Затем на верхнем уровне index.js, который отображает мой App.js компонент: 

import "typeface-pt-mono";

Вот и все.Теперь везде в моем приложении есть css, который ссылается на font-family: "PT Mono", это просто работает.

0 голосов
/ 02 мая 2019

Документация неясна, когда речь заходит об использовании @import в createGlobalStyle.Кажется, что есть разница в производстве по сравнению с разработкой, скорее всего остановит FOUC, если вы переместите @import на верхний уровень, он будет импортирован правильно и отобразит ваши стили.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
   @import url("https://fonts.googleapis.com/css?family=Quicksand");
   body {
      color: red;
   }
`

const App = () => (
   <>
      <GlobalStyle />
      <Provider store={store}>
         <Router>
            <div>
              //REST OF APP
            </div>
         </Router>
      </Provider>
   </>
);

export default App;
0 голосов
/ 05 марта 2019

Это случилось и со мной, и твоя информация о проблеме помогла мне.Спасибо @ Брендан!

0 голосов
/ 06 марта 2019

ваш запрос на https блокируется после того, как вы загрузите его на страницы GitHub, поэтому импорт css не выполняется

0 голосов
/ 23 февраля 2019

Проблема заключается в том, что в настоящее время существует проблема при использовании @import в глобальных стилях.Решение состоит в том, чтобы вынуть @import и поместить его в другое место, например, в тег ссылки, если вы используете шрифты Google.

...