How to Create a Single Page React.js Page App with Different CSS for Each View

Aug 17, 2020 • 5 Minute Read

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

      import {Helmet} from 'react-helmet';

// ...
<Helmet>
    <meta charSet="utf-8" />
    <title>My Title</title>
    <link rel="canonical" href="http://mysite.com/example" />
</Helmet>
// ...
    

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

      import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Login from "./Pages/Login";
import Home from "./Pages/Home";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Login</Link>
            </li>
            <li>
              <Link to="/home/">Home</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Login} />
        <Route path="/home/" component={Home} />
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
    

Pages/Home.js File

      import React from "react";

import "../styles.css";

function Home() {
  return (
    <div className="App">
      <h1>Home Page</h1>
      <p>This is the Home Page</p>
    </div>
  );
}

export 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.

      import React from "react";
import { Helmet } from "react-helmet";

function Login() {
  return (
    <div className="login container">
      <Helmet>
        <link rel="stylesheet" href="login.css" />
      </Helmet>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}

export default Login;
    

Alternatively, we can also include the link tag, as follows:

      function Login() {
  return (
    <div className="login container">
      <Helmet link={ 
          [ 
            "rel": "stylesheet", 
            "href": "login.css" 
          ] 
        }/>
      <h1>Login</h1>
      <p>This is the login page</p>
    </div>
  );
}
    

styles.css file

      .App {
  font-family: sans-serif;
  text-align: center;
}

h1 {
  color: #fc3;
}
    

login.css File

Add the login.css file inside the public folder.

      h1 {
  color: #e09;
}

p {
  font-size: 24px;
}
    

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

      import React from "react";
import { Helmet } from "react-helmet";

function Login() {
  return (
    <>
      <div className="login container">
        <h1>Login</h1>
        <p>This is the login page</p>
      </div>
      <style
        dangerouslySetInnerHTML={{
            __html: `
            h1 {
                color: #e09;
            }

            p {
                font-size: 24px;
            }          `
        }}
      />
    </>
  );
}

export 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