How to Create a Single Page React.js Page App with Different CSS for Each View
Introduction
In this guide, we are going to see how to write different CSS for each page in React with react-router-dom using react-helmet.
There might be scenarios where you only need minimal CSS for a particular page. For example, let’s consider a login page. You don't require the stylesheet of the entire application, until and unless the user is authenticated. So, in that case, it would be unfair for the user to wait for the browser to download the CSS of the whole application, thus leading to poor user experience.
React Helmet (react-helmet)
Helmet is a reusable React component that manages all of your changes to the document head.
Usage
1import {Helmet} from 'react-helmet';
2
3// ...
4<Helmet>
5 <meta charSet="utf-8" />
6 <title>My Title</title>
7 <link rel="canonical" href="http://mysite.com/example" />
8</Helmet>
9// ...The <Helmet /> component injects the plain HTML elements into the <head> tag of the application. It can contain meta, title, link, style, or any other valid HTML head tags.
Let's Begin with Our Code
First, let's create a "Pages" folder inside the src directory, that will contain all of our page components. We will have two pages, Login and Home, and use the <Helmet /> component in the Login Page.
index.js File
1import React from "react";
2import ReactDOM from "react-dom";
3import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4
5import Login from "./Pages/Login";
6import Home from "./Pages/Home";
7
8function App() {
9 return (
10 <Router>
11 <div>
12 <nav>
13 <ul>
14 <li>
15 <Link to="/">Login</Link>
16 </li>
17 <li>
18 <Link to="/home/">Home</Link>
19 </li>
20 </ul>
21 </nav>
22
23 <Route path="/" exact component={Login} />
24 <Route path="/home/" component={Home} />
25 </div>
26 </Router>
27 );
28}
29
30const rootElement = document.getElementById("root");
31ReactDOM.render(<App />, rootElement);Pages/Home.js File
1import React from "react";
2
3import "../styles.css";
4
5function Home() {
6 return (
7 <div className="App">
8 <h1>Home Page</h1>
9 <p>This is the Home Page</p>
10 </div>
11 );
12}
13
14export default Home;Pages/Login.js File
In the Login page, we are going to add the <Helmet /> Component and inject our link tag for the login stylesheet into the head.
1import React from "react";
2import { Helmet } from "react-helmet";
3
4function Login() {
5 return (
6 <div className="login container">
7 <Helmet>
8 <link rel="stylesheet" href="login.css" />
9 </Helmet>
10 <h1>Login</h1>
11 <p>This is the login page</p>
12 </div>
13 );
14}
15
16export default Login;Alternatively, we can also include the link tag, as follows:
1function Login() {
2 return (
3 <div className="login container">
4 <Helmet link={
5 [
6 "rel": "stylesheet",
7 "href": "login.css"
8 ]
9 }/>
10 <h1>Login</h1>
11 <p>This is the login page</p>
12 </div>
13 );
14}styles.css file
1.App {
2 font-family: sans-serif;
3 text-align: center;
4}
5
6h1 {
7 color: #fc3;
8}login.css File
Add the login.css file inside the public folder.
1h1 {
2 color: #e09;
3}
4
5p {
6 font-size: 24px;
7}Now when you switch from Login page to the Home page, you'll notice that the <h1> element in the Home page has a different color than the Login page and that the font family in the pages are different as well.
Other Alternative if You Don't Want to Use React Helmet
If for some reason, you don't require head tag management and don't want to bloat your app with an extra library, you can use the CSS in JS approach which is supported natively in React. So, in a page component, you can write something like as follows:
Pages/Login.js
1import React from "react";
2import { Helmet } from "react-helmet";
3
4function Login() {
5 return (
6 <>
7 <div className="login container">
8 <h1>Login</h1>
9 <p>This is the login page</p>
10 </div>
11 <style
12 dangerouslySetInnerHTML={{
13 __html: `
14 h1 {
15 color: #e09;
16 }
17
18 p {
19 font-size: 24px;
20 } `
21 }}
22 />
23 </>
24 );
25}
26
27export default Login;Conclusion
React Helmet is a good library for your HTML head tag management. It can update the meta tags, add favicon, and update the title for each page. That's it from this guide, I hope you learned something new today. Please follow my other guides on React All You Need to Know About Axios Formspree AJAX with ES6 Submit Form in React without JQuery AJAX