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-11-04