How to implement styled-components #382

alexis-piquet · 2023-07-03T23:12:19Z

alexis-piquet
Jul 3, 2023

Hi dear community!!!

Today I will give you an exemple of styled-components implementation in your awesome Nextron Application 🚀

Install

So first of all install the library:

npm i styled-components

Compilation

Once its installed add ts files in your tsconfig.json under the renderer directory, which one used for your NextJs part.

(The following example contains only representative files, don't forget to keep your existing declarations.)

{
  "include": [
    "**/*.ts",
    "components/**/*.ts",
    "pages/**/*.ts",
    "styles/**/*.ts"
  ]
}

Initialize it on the Server Side

Create or Edit your _document.tsx in your pages directory`.

import type { DocumentContext, DocumentInitialProps} from 'next/document'
import Document, { Head, Html, Main, NextScript } from 'next/document'
import React, { ReactNode } from 'react'
import { ServerStyleSheet } from 'styled-components'

import { Body } from '#styles'

export interface DocumentProps extends DocumentInitialProps {
  styleTags?: ReactNode
}

class MyDocument extends Document {
  public render(): JSX.Element {
    return (
      <Html dir="ltr">
        <Head>
        </Head>
        <Body>
          <Main />
          <NextScript />
        </Body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async (ctx: DocumentContext): Promise<DocumentInitialProps> => {
  const sheet = new ServerStyleSheet()
  const originalRenderPage = ctx.renderPage
  try {
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) =>
          sheet.collectStyles(React.Children.only(<App {...props} />)),
        })

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

export default MyDocument

I've a path in the renderer named styles and I use ts-alias to import files, here I've a path like styles/index.ts.

I'll give you an example of it in the next step. Don't panic !!!

Ok fine, you have done the half part of the implementation, continue you have pretty much finish it 💪🏽

Do or do not. There is no try. #yoda

Creation of a Global Layout

So now we are able to create our GlobalLayout component to define a .... 🎉 .... global layout... Well, you got it!

Create or Edit your _app.tsx in your pagesdirectory`.

import type { AppProps } from 'next/app'
import React from 'react'
import { ThemeProvider } from 'styled-components'

import { GlobalLayout, theme } from '#styles'

const MyApp = (
  { Component, pageProps }: AppProps
) => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalLayout/>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

So as you can see I use the ThemeProvider from styled-components to apply my default theme, after that, I define earlier <Component {...pageProps} /> the <GlobalLayout />.

Now, let's go to the styles/index.ts path

import styled, { createGlobalStyle } from 'styled-components'

export const Body = styled.body`
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  height: 100%;
  width: 100%;
  user-select: none;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`

export const theme = {
  'body': {
    'display': 'block',
  },
  'body, a, div, button': {
    'box-sizing': 'border-box',
  },
  '*': {
    'font-family': '"Roboto", sans-serif',
    'user-select': 'none',
  },
}

export const GlobalLayout = createGlobalStyle`
  ${theme}
`

We can find in:

the GlobalLayout components
the theme const to declare or default
and the Body, our first styled-component used in the _document.tsx

Don't forget, you will be able to add variables in your styles and play with props, it's the Power of (Love) styled-components.

Congrats you have implemented it, and I'm pretty sure, you will rock with it now! May the force be with you! 🎉

Don't hesitate to give me feedback ❤️

I wish you happy coding days!!!! 😘

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to implement styled-components #382

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

How to implement styled-components #382

alexis-piquet Jul 3, 2023

Install

Compilation

Initialize it on the Server Side

Creation of a Global Layout

Replies: 0 comments

alexis-piquet
Jul 3, 2023