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 are the advantages of utilizing NGRX over constructor-injected services?

Have you ever wondered about the benefits of using NGRX or NGXS for an Angular application instead of constructor injected services to manage component IO? Is it simply to prevent mutation of component properties references without replacing the entire pr ...

javascriptangularrxjsngrxngxs

Transferring Data to EJS Template

I have been facing a challenge in passing a value from a POST route to an EJS file for display. Despite trying various methods like redirecting, sending, and rendering the results, the data won't make its way to the EJS file. Below is the POST route ...

javascriptnode.jsexpressejs

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

javascriptcssreactjsfrontend

Struggling to change h2 style on WordPress?

In a WordPress page, I create three heading texts and adjust the CSS when the screen width is less than 820px. Here is the code snippet: <h1 class="block-h1">Heading 1</h1> <h2 class="block-h2">Heading 2</h2> <h3 class="block-h3 ...

csswordpress

Toggle the visibility of a section in an external .js file

Is there a way to toggle the display of answers from an external .js file using a button? If I were able to modify the code, I could wrap the answers in a div. However, since it's an external .js file, is this feasible? Here's the fiddle and cod ...

javascriptjquery

The access-control-allow-origin header is failing to receive updates

I need help figuring out how to manually set the Access-origin header. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

javascriptexpress

I am looking to display multiple divs sequentially on a webpage using JavaScript

Looking to display a rotating set of alerts or news on my website. The goal is to show each news item for a certain number of seconds before moving on to the next one in line. However, I'm new to javascript and need help creating a code that will cont ...

javascripthtml

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera

Visit the following website: I have implemented font-face on my site: @font-face { font-family: 'SegoeUI'; src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), url(' ...

cssfont-face

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput

Python script for downloading audio files loaded with JavaScript

I am currently working on a Python script to automate the process of downloading English audio files from a specific website. When I click on the play button, the audio file starts to load and play, but I am unsure how to capture and download the file in ...

javascriptpython-3.xseleniumweb-scrapingpython-requests

req.next does not exist as a function [END]

I am currently working on developing a website and I have encountered an issue in the dashboard stage. The error message TypeError: req.next is not a function keeps appearing, particularly when trying to create a subpage for the dashboard. I am utilizing t ...

javascriptnode.jsexpresspassport.js

How can we set up Node JS to automatically trigger events when a specific future date and time from the database is reached?

I have taken on the challenge of providing users with a feature where they can select a date and time in the near future while placing an order. This chosen time and date will be saved in the database. How can I set up a function to automatically execute ...

javascriptnode.jsreactjsmongodbtriggers

I am having an issue with my MUI X Line chart where it only displays the last value when hovering over any of the markers on the chart

I am experimenting with MUI x charts to visually represent data. The chart itself is displaying correctly, but I'm facing an issue where only the latest marker point is appearing when hovering. https://i.sstatic.net/zGyltj5n.png Can anyone explain w ...

reactjsnext.jsmaterial-uimui-xmui-x-charts

declaration of function interface and property that cannot be modified

After reviewing some new TypeScript code, I encountered a part that left me puzzled. interface test { (a: number): number; readonly b: number; } While I understand that (a:number): number signifies a function where the argument is a:number and the ret ...

javascripttypescript

tips for styling a nested react component

When applying a different background color to a nested component within a parent component on a specific page, the styles may not be working as expected. This issue is often encountered when using LESS and importing styles from a module file (styles.modu ...

reactjs

Increasing the height of nested Bootstrap columns by stretching them out

I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row ...

htmlcssbootstrap-5

The NodeJS req.query is providing inaccurate information

When I send a JSON from the Client-Side to a NodeJS Server, it looks like this: $.ajax({ type: "POST", dataType: "jsonp", url: "www.xyz.com/save", data: { designation: "Software Developer", skills: [ "", "ASP.NET", "P ...

javascriptjqueryajaxjsonnode.js

Error: The function "this.state.data.map" is not defined in ReactJS

class Home extends Component { constructor(props) { super(props); this.state = { data: [], isLoaded: false, }; } componentDidMount() { fetch("https://reqres.in/api/users?page=2") .then((res) => res.json ...

javascriptreactjsreact-nativeapiaxios

Ensure that the corner ribbon remains in place on the pricing table by making

Looking to enhance the functionality of a price table that features a corner ribbon? Currently, there is a hover effect on the price table that displaces the corner ribbon. Check out the code snippet below. The goal is to keep the corner ribbon sticky when ...

htmlcssbootstrap-4