Skip to content

Commit

Permalink
Adding globalStyled with styled components
Browse files Browse the repository at this point in the history
# Changes

- adding global styles with styled components in _app.js

- Details

- Returns a StyledComponent that does not accept children. Place it at the top of your React tree and the global styles will be injected when the component is "rendered".
- Since the GlobalStyle component is a StyledComponent, that means it also has access to theming from the <ThemeProvider> component if provided.
  • Loading branch information
ArthurMaverick authored Sep 2, 2020
1 parent fa153bc commit bdc3526
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions examples/with-styled-components/pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import { createGlobalStyle } from "styled-components";
import { ThemeProvider } from 'styled-components'



const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
`;

const theme = {
colors: {
primary: '#0070f3',
Expand All @@ -8,6 +19,7 @@ const theme = {

export default function App({ Component, pageProps }) {
return (
<GlobalStyle />
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
Expand Down

0 comments on commit bdc3526

Please sign in to comment.