An important change if you are updating to Styled Components v4.
I encountered a problem with my styles
I moved my blog from Jeykll/Github Pages to Gatsby/Netlify and I used one of the ubiquitous starter templates. I knew I wanted to use Styled Components since it is what I have the most experience with.
I set it up and everything was working without any console errors but I quickly noticed that my styles weren’t taking effect. As I usually do I assumed that I had made a mistake somewhere so I checked and double-checked the project.
Everything looked good so I started doing some research. I was fairly confident that the issue was encountered with a new version since the site was working before I ran the AWESOME:
yarn upgrade-interactive --latestso I did a quick compare of the versions in git and discovered that Styled-Components was the only Semantically Major update so I correctly assumed that was causing my issue.
I headed over to the documentation for Styled Components and in an obscure corner I found this:
injectGlobal is no longer used in v4 in favor of createGlobalStyle
so the following code needs to be changed to use createGlobalStyle
import { injectGlobal } from 'styled-components';
import styledNormalize from 'styled-normalize';
injectGlobal`
${styledNormalize}
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
box-sizing: border-box;
}
body {
background: #f9fafc;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
padding: 50px 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
}
.gatsby-highlight {
border-bottom: 1px solid #e0e6ed;
border-top: 1px solid #e0e6ed;
margin: 15px -100px;
padding: 0;
pre[class*="language-"] {
margin: 0;
padding: 25px 100px;
}
}
pre[class*="language-"] {
background: rgba(245, 245, 245, 1);
color: rgb(65, 76, 94); }
@media only screen and (max-width: 870px) {
.gatsby-highlight {
margin: 15px -15px;
pre[class*="language-"] {
padding: 25px;
}
}
}
`;
})const GlobalStyle = createGlobalStyle`
${styledNormalize}
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
box-sizing: border-box;
}
body {
background: #f9fafc;
font-family: 'Roboto', sans-serif;
line-height: 1.6;
padding: 50px 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
}
.gatsby-highlight {
border-bottom: 1px solid #e0e6ed;
border-top: 1px solid #e0e6ed;
margin: 15px -100px;
padding: 0;
pre[class*="language-"] {
margin: 0;
padding: 25px 100px;
}
}
pre[class*="language-"] {
background: rgba(245, 245, 245, 1);
color: rgb(65, 76, 94); }
@media only screen and (max-width: 870px) {
.gatsby-highlight {
margin: 15px -15px;
pre[class*="language-"] {
padding: 25px;
}
}
}
`After this the styles were correctly applied and I was back to work.