Utilize separate CSS files in React components for better organization

Question

Utilize separate CSS files in React components for better organization

Hello, I have encountered an issue with splitting my components and using react-router-dom. I decided to split the CSS for each component, such as Main.jsx - Main.css and

CustomerBase.jsx - customerbase.css

. However, the problem I am facing is that the CSS files are being joined together. For example, if I set the body color to white for CustomerBase.jsx and yellow for Main.jsx, it will use white for both the Main and CustomerBase components. How can I prevent this from happening?

Here is an example of the CSS files:

customerbase.css
body {
    background: white;
}

main.css
body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: rgb(236, 107, 32);
}

javascript css reactjs react-router-dom

Answer 1

Answer №1

It is advisable to avoid using the body tag multiple times in your code.

Instead, consider giving each component a unique wrapper id like #my_component_id. In the CSS file for each component, add the #my_component_id before your styling to only affect that specific component. If you are using Sass, you can encapsulate all your styling within the #my_component_id.

#title-component {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#title-component h1 {
    color: green;

}

#content-component {
    background: white;
}

#content-component h1 {
    color: red;
}

<div id="title-component">
  <h1>Hi There, Here you have green h1 tag.</h1>
</div>

<div id="content-component">
  <h1>But Here, You can see a red h1 tag!</h1>
</div>

Answer 2

It is advisable to avoid using the body tag multiple times in your code.

Instead, consider giving each component a unique wrapper id like #my_component_id. In the CSS file for each component, add the #my_component_id before your styling to only affect that specific component. If you are using Sass, you can encapsulate all your styling within the #my_component_id.

#title-component {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#title-component h1 {
    color: green;

}

#content-component {
    background: white;
}

#content-component h1 {
    color: red;
}

<div id="title-component">
  <h1>Hi There, Here you have green h1 tag.</h1>
</div>

<div id="content-component">
  <h1>But Here, You can see a red h1 tag!</h1>
</div>

Utilize separate CSS files in React components for better organization

Answer №1

Similar questions

Converting Redux to use Immutable.js: A step-by-step guide

Ways to display and conceal menu depending on initial view and scrolling

In React, CSS modules do not support the use of Sass' "@use" directive, but they do allow the

Employing jQuery to extract the text from the h4 class="ng-binding" element beyond the Angular scope

Optimize data storage with javascript on Otree

Sequelize error: Foreign key mentioned, yet not found in the table

Issue with Material UI select causing it to scroll to the top of the page

Adjust the size of the HTML input font to decrease as additional text is entered

Tips for incorporating strikethrough into a drop-down select box in a jquery datatable and implementing filtering based on it

What could be the reason behind the disruption in this JavaScript associative array?

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

Creating a JavaScript function that responds to multiple click events

Encountering a problem when utilizing the each loop within an ajax request

Experiencing difficulties with certain npm CLI modules when using it as a task runner and build tool

Html content overlapping div rather than being stacked vertically

Bootstrap implementation for personalized notifications

Cross-Browser Compatibility of CSS

Is there a way to send a promise resolve or reject from a function code within router.post() in Express?

Make sure to include additional details, such as copyright information and a link to read more, when copying text. It is also important to maintain the

The deployment of the React Single Page Application on Netlify encountered errors during the