Faire du CSS-in-JS avec styled-component dans NextJS

Table des matières

Installation
Modifier le _document.tsx
Utilisation dans un composant

Installation

Nous allons commencer par ajouter styled-component à notre projet NextJs en exécutant les commandes suivantes:

yarn add styled-components
yarn add @types/styled-components babel-plugin-styled-components --dev

Ensuite, nous allons créer un fichier de configuration pour babel

./babelrc

{ 
    "presets": ["next/babel"], 
    "plugins": [
        ["styled-components", { "ssr": true }]
    ]
}

Modifier le _document.tsx

Si le fichier ./pages/_document.tsx n'est pas encore présent dans notre projet, nous allons commencer par l'ajouter.

./pages/_document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App) => (props) =>
                        sheet.collectStyles(<App {...props} />),
                })

            const initialProps = await Document.getInitialProps(ctx)
            return {
                ...initialProps,
                styles: (
                    <>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </>
                ),
            }
        } finally {
            sheet.seal()
        }
    }

    render() {
        return (
            <Html lang="fr">
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

Utilisation dans un composant

Une fois installé, nous pouvons utiliser styled-components dans nos composants comme ceci:

./components/my-component.tsx

import styled from 'styled-components'

export const MyElement = styled.div`
    color: red;
`;

export function MyComponent() {
    return (
        <MyElement>
            This is a test component...
        </MyElement>
    )
}