ReactJS incorporates multiple CSS files

I am currently working on developing a Single Page Application using ReactJS. However, I am facing an issue with styling. Currently, I have created 3 different pages (with the intention of adding more in the future), each having its own CSS file that is imported as follows:

*index.jsx
import index form './index.css'*

*page2.jsx
import page3 form './index.css'*

*page3.jsx
import page3 form './index.css'*

When I initially open the site in the browser and navigate to the (index) page, everything appears fine. But when I proceed to the next page (page2), then click back and return to the (index) page, the styles are changed. This is happening because some classes have the same name in both CSS files, and the second CSS file loaded (page2.css) is overriding the (index.css). How can I resolve this issue?

Apologies if my question is not very clear.

Thank you!

javascriptcssreactjsreact-routerjsx

Answer №1

In order to differentiate between various contexts, it is essential to establish a clear method. While it's challenging to provide specific advice without reviewing the code itself, one potential solution could involve assigning an ID to a parent element on every page. By incorporating this ID into your CSS selector, you can precisely target the desired element for styling purposes.

div#inIndex .myStyle {
    /* styles */
}

div#inPage2 .myStyle {
    /* styles */
}

div#inPage3 .myStyle {
    /* styles */
}

While this approach may be effective, I must question why distinct class names are not utilized instead?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to push a variable after employing the split function in JavaScript?

error: An unexpected TypeError occurred while trying to read property 'push'. The error was on this line: " this.name[i].push(arrayData[0]); " I'm confused because the console.log statement before that line shows "data is loaded:" alo ...

javascriptvue.jssplitpush

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

How can I retrieve the panel numbers of jQuery UI tabs and adjust their visibility using CSS? I am looking to identify the panel numbers of each tab and control the visibility of certain tabs. <div id="tabs"> <ul> <li><a href="#"> ...

javascriptjquerycssjquery-uijquery-1.10

The React form data was sent to the Express backend, but upon receipt, it was

Currently, I am working on image uploading in my MERN app. I am utilizing the express-fileupload package for this purpose. The issue I am facing is that while sending an image from the frontend in FormData, the backend is receiving null values. Frontend c ...

node.jsreactjsexpressexpress-fileupload

Incorporate a font-awesome icon directly within the input field

My div element contains a span element, which in turn includes an i tag. However, the i element extends outside of both the span and div elements. I am attempting to place an eye icon inside an input field. Here is my current code - what adjustments shou ...

htmlcss

Vue and Axios encountered a CORS error stating that the 'Access-Control-Allow-Origin' header is missing on the requested resource

I've encountered the error above while using Axios for a GET request to an external API. Despite consulting the Mozilla documentation, conducting thorough research, and experimenting with different approaches, I haven't made any progress. I&apos ...

javascriptgetcorsvue.jsaxios

Transform User's Regex Output into Uppercase

My nodejs program allows users to input text and apply their own regular expressions for editing. I want users to have the option to capitalize or lowercase text as well. For example, if a user enters "StackOverflow is great!" with the regex (.) set to be ...

javascriptregexnode.js

Retrieve JSON data from an HTTP request using Node.JS

Hi there, I'm struggling with the Node.js HTTPS request. Basically, I send a request to a server and it responds with a JSON message that I need to parse and save in a variable so I can use it in other functions. let obj=JSON.parse(response); return ...

javascriptjsonnode.jshttps

I attempted to link MongoDB to my server, only to encounter the error that was displayed

Error: variable 'client' is not defined on line 21 of index.js file at run (C:\Users\DELOWAR\Desktop\Assignment 11\inventory-management-server\index.js:21:5) at Object.<anonymous> (C:\Users\DE ...

node.jsreactjsmongodbexpressserver

Issue with jQuery select box (roblaplaca) and its custom scroll bar functionality not functioning as expected

Recently, I implemented the custom select box script from . This script allows for two select boxes, where the second one updates dynamically using AJAX when there is a change in the first select box. Below is a sample of the HTML code: <option>One& ...

javascriptjqueryhtmlcssajax

Exploring the concept of conditional rendering in functional components within NextJs allows for dynamic

Hey there! I've been trying to figure out how to redirect the page if any of the next router query parameters are empty. For example, localhost:3000/page?id=*null/empty* Here's what I have so far: export default function page() { const router ...

node.jsreactjsnext.js

Learn the process of extracting various data from a PHP source and saving it in select options through AJAX

One of the features on my website is a select option that allows users to choose a hotel name obtained from a dynamic php script. Once a hotel is selected, another select option displays room types available based on the chosen hotel. However, there seem ...

javascriptphpajax

Is there a way to retrieve the Boolean value from an ng-show attribute without having to re-evaluate the expression?

I'm currently working on a project that involves displaying and hiding a lot of content dynamically using ng-show. Some of the expressions being evaluated are quite lengthy, like this... <div ng-show="some.object.with.nested.values && ...

javascriptangularjsng-show

Using Promise.map inside another Promise.map

Attempting to return a JSON object via Bluebird's Promise.mapSeries/Promise.map nested within another Promise.mapSeries/Promise.map is proving difficult. Below is the code snippet for the function: function getMovieDetails(link){ return new Promise(f ...

javascriptjquerynode.jspromisebluebird

Instruct the component to reset its state when closing

My current dilemma involves dealing with a parent owning a ModalComponent: render(){ return ( <MyCustomModal visible={this.state.displayModal} //other properties /> ); } The MyCustomModal component carries its own state, referred to as ...

reactjs

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

How to programmatically disable a button using React and Material-UI: A step-by

Attempting to deactivate a button once the user has clicked on it, but from a handler function. I have come across these two related questions: React Material UI: How to give a button a custom color when disabled? Change disable attribute in react select ...

reactjsmaterial-ui

Exploring how to read class decorator files in a Node.js environment

I've developed a custom class decorator that extracts permissions for an Angular component. decorator.ts function extractPermissions(obj: { [key: 'read' | 'write' | 'update' | 'delete']: string }[]) { re ...

javascriptnode.jsangulartypescriptdecorator

The watcher fails to function properly when attempting to pass data from a for loop in the parent component

<div v-for= "(item , index) in chartData" class="col" :key="index"> <ColumnChart :chartdata="item.tactical" :simpletype="true" /> </div> One of the properties I have is called chartData, initially set as an empty array. Upo ...

javascriptvue.jsvue-component

The Canvas Clear function is malfunctioning; the items in the array are not being deleted

Even after being deleted from the array, the squares are still drawn. Shouldn't they disappear when removed from the Array? Does the array not update within the go function? Javascript: var canvas; var ctx; $(document).ready(function(){ $("#t ...

javascript

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

I'm attempting to create a gradual fading gray line by using a div that is sized at 1x100px with a CSS gradient applied for the fade effect. The only issue I am encountering is in Internet Explorer where the div is displaying a blue border which I am ...

cssinternet-explorergradientlinear-gradients