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
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 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 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 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!