Hey everybody, 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, which at this point are the following ones:
- 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 CookiesPolicyThis 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!
