Jordi Bassaganas
Jordi Bassaganas

Jordi Bassaganas

How to Reuse CSS-in-JS code in Next.js Apps

Photo by Caspar Camille Rubin on Unsplash

How to Reuse CSS-in-JS code in Next.js Apps

In one single template for pages to look all the same

Jordi Bassaganas's photo
Jordi Bassaganas
·Feb 18, 2021·

2 min read

Play this article

Hey everyone, how are things going? Today it's been day 32 since I started my 100 days of code challenge on Twitter.

As you may know I am writing an HTML form builder that will allow users to create HTML5 forms easily by adding, dragging and dropping, gracious, graceful Material-UI cards. The frontend tech-stack in place is this one: React, Redux, Next.js and Material-UI. The source code of the app is available on GitHub.

Recently I came across the need to reuse a bunch of CSS-in-JS code in one single template for my Next.js pages to look all the same:

  • About
  • Terms of Use
  • Privacy Policy
  • Cookies Policy

figure-01.png Figure 1. Files in the /pages folder of my Next.js app.

This time it seemed as if the best thing to do was to create a new folder named styles in the root directory to only add a pages.js file into it.

figure-02.png Figure 2. I added the styles/pages.js file.

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  box: {
    padding: theme.spacing(2),
    margin: theme.spacing(2),
  },
  paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
  },
}));

With this basic set up ready all I had to do was to import the styles in the public, server-side rendered pages listed above. As an example, here's how the code in pages/cookies-policy.js looks like after reusing the CSS-in-JS code:

import { Box, Container, Grid, Paper, Typography } from '@material-ui/core'
import MainNav from 'components/MainNav'
import Footer from 'components/Footer'
import Head from 'next/head'
import useStyles from '../styles/pages'

const CookiesPolicy = () => {
  const classes = useStyles()

  return <div>
    <Head>
      <title>HTML Form Builder | Cookies Policy</title>
    </Head>
    <MainNav />
    <Container maxWidth="lg">
      <Box className={classes.box}>
        <Typography variant="h4" component="h1" align="center" gutterBottom>
          Cookies Policy
        </Typography>
        <Typography variant="caption" component="p" align="center">
          Last Revised: February 18, 2021
        </Typography>
      </Box>
      <Grid container>
        <Grid item xs={12} sm={12} md={12}>
          <Paper className={classes.paper}>
            <Typography variant="p">
              Cookies? Mmm, they are delicious! This website does not collect personal data through third-party cookies.
            </Typography>
          </Paper>
        </Grid>
      </Grid>
    </Container>
    <Footer />
  </div>
}

export default CookiesPolicy

This way all Next.js pages look the same.

figure-03.png Figure 3. The About, Terms of Use, Privacy Policy, and Cookies Policy pages now they all look the same

I hope this tip will be helpful to your awesome React app too. This is all for now, thanks for reading!

Did you find this article valuable?

Support Jordi Bassaganas by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this