Source:  Twitter logo

I'm using React, Redux, styled components and GitHub pages with my app.

Global styles work in development, but do not get applied after deploying to GitHub pages.

e.g. in 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;

The problem lies in the fact that there is currently an issue when using @import in Global Styles. The solution is to take the @import out and place it elsewhere, such as in a link tag, if you're using Google fonts.

3 users liked answer #0dislike answer #03
Brendan profile pic
Brendan

The documentation is unclear when it comes to using @import within createGlobalStyle. There seems to a be a difference in production compared to development, most likely to stop FOUC, if you move the @import into the top-level then it will import correctly and display your styles.

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;
3 users liked answer #1dislike answer #13
sidhuko profile pic
sidhuko

It happened to me too and your info about the issue helped me. Thanks @Brendan!

1 users liked answer #2dislike answer #21
lewislbr profile pic
lewislbr

your request to https is blocked once you upload it to GitHub pages, so your css import fails

1 users liked answer #3dislike answer #31
Tal Avissar profile pic
Tal Avissar

I had the same problem when I went to deploy my React app's production build that uses Google fonts. Then I discovered this awesome project: https://github.com/KyleAMathews/typefaces. It has all of the Google fonts, and makes them available via NPM.

Essentially, all I had to do was

npm install typeface-pt-mono --save

Then in the top-level index.js that renders my App.js component:

import "typeface-pt-mono";

That's it. Now everywhere in my app that I have css that refers to font-family: "PT Mono" it just works.

1 users liked answer #4dislike answer #41
Cliff Hall profile pic
Cliff Hall

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).