React is a JavaScript library used in the front-end development of a website. It consists of multiple components, which are pieces of code that manage and organize our react application. Each component represents a distinct functionality and can have specific CSS styles, allowing for fine-grained control over the appearance and behavior of different application parts.
Note: To learn how to create a React app, refer to this Answer.
This answer will discuss some common ways to use different CSS styles for each component which are as follows:
Using import statements
Using third-party library
We can include CSS files for each react component using import statements. If we want to apply CSS to the same tag in both files, we can assign a unique class name to the tag element and modify its CSS accordingly.
The following example has two react components: HomePage and ContactPage.
In our App.js file, we define the routes of our application. In our example, there are two routes: HomePage (the index route) and ContactPage.
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import HomePage from './components/HomePage';import ContactPage from './components/ContactPage';function App() {return (<Router><Routes><Route path="/" element={<HomePage />} /><Route path="/ContactPage" element={<ContactPage />} /></Routes></Router>);}export default App;
In our HomePage.js ,we include its CSS file through the import statement.
import React from 'react';import { Outlet, Link } from "react-router-dom";import "./homepage.css";const HomePage = () => {return (<div><h1 className="homeHeading">HomePage</h1><Link to="/ContactPage">Click to open contact page</Link><Outlet /></div>);};export default HomePage;
In our HomePage.css file, we change the CSS of the class homeHeading which refers to the h1 tag.
.homeHeading {color: yellow;}
In our ContactPage.js, we include its CSS file through the import statement.
import React from 'react';import "./contactpage.css";const ContactPage = () => {return (<div><h1 className="contactHeading">Contact Page</h1></div>);};export default ContactPage;
In our ContactPage.css file, we change the CSS of the class contactHeading which refers to the h1 tag.
.contactHeading{color:pink;}
The example explained above, when executed, displays the following result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
In this method, we use a third-party library react-helmet to import CSS for our each view. React-helmet is a library that allows us to update the head part of our HTML. Because importing CSS files directly in React can lead to conflicts and unintended style overrides when multiple CSS files apply styles to the same HTML tags, to solve this issue, we use react-helmet.
To use helmet, we have to install it using the following command:
npm install react-helmet
The following example has two react components: HomePage and the ContactPage.
In our App.js file, we define the routes of our application. In our example, there are two routes: Home Page (the index route) and Contact Page.
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import HomePage from './components/HomePage';import ContactPage from './components/ContactPage';function App() {return (<Router><Routes><Route path="/" element={<HomePage />} /><Route path="/ContactPage" element={<ContactPage />} /></Routes></Router>);}export default App;
In our HomePage.js, we include its CSS file through an import statement.
import React from 'react';import { Outlet, Link } from "react-router-dom";import "./homepage.css";const HomePage = () => {return (<div><h1>HomePage</h1><Link to="/ContactPage">Click to open contact page</Link><Outlet /></div>);};export default HomePage;
In our HomePage.css file, we change the CSS of tag h1.
h1 {color: yellow;}
In our ContactPage.js file, we include our CSS file in the helmet tag. Our CSS file should be in the public folder as react-helmet is designed to work with static assets in the public folder.
import React from 'react';import { Helmet } from 'react-helmet';const ContactPage = () => {return (<div>{ <Helmet><link rel="stylesheet" href="/contactpage.css" /></Helmet> }<h1>Contact Page</h1></div>);};export default ContactPage;
In our ContactPage.css file, we change the CSS of tag h1.
h1{color:pink;}
The example explained above, when executed, displays the following result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
React-helmet provides a powerful solution for managing and applying different CSS styles to each component in a single-page React application. If we prefer not to use react-helmet, an alternative approach exists for styling our components. We can import CSS files for each component individually, but it is important to ensure that each element tag within the component has a unique class name assigned to it.
Free Resources