Skip to content

Styled Components 💅🏾

CSS in JS

Why - Scoped CSS

uses template literals

import styled from 'styled-components'
const Logo = styled.h1`
    font-size: 4rem;
`;

Global styles

const GlobalStyles = createGlobalStyle`
    @font-face {
    ...
    }
    :root {
        --black: #393939
        --grey: #393939
        --gray: var(--grey)
    }
`;

const Page = () => (
    <div>
        <GlobalStyles />
        <Header />
        <InnerStyles>{children}</InnerStyles>
    </div>
)

Next JS and Styled components

Prop `className` did not match.
Server: "sc-asdf"
Client: "sc-fdsa"

Solution: ServerStyleSheet

Next JS hook: getInitialProps - wait until the method has been resolved - then it sends the data (server --> browser)


Last update: 2022-09-23