What is the best way to utilize multiple .css files on distinct components within a React application?

Question

What is the best way to utilize multiple .css files on distinct components within a React application?

Working on a project with two separate .jsx files each representing a different component.

The first one is called Blog.jsx

import React from "react";
import '../assets/css/blog.css';

export const Blog = () => (
    <div>
        <h1>Hello Blog</h1>
    </div>
)

Accompanied by its own CSS file, blog.css

div { background: #ff481f; }

Then we have the second component, Landing.jsx

import React from "react";
import '../assets/css/landing.css'

export const Landing = () => (
    <div>
        <h1>Hello Landing</h1>
    </div>
)

With its corresponding CSS file, landing.css

div { background: #86ff2b; }

Upon implementing routing and adding instances of both components in the App.js file (the main file in a React application), an issue surfaced. When navigating between components, the background color remains the same for both (only loading the styles from landing.css).

How can I resolve this problem so that each component utilizes its respective CSS file correctly and loads it accordingly?

css reactjs

Answer 1

Answer №1

Typically, webpack and similar build tools will consolidate all CSS files into one, even when CSS is imported from separate JSX files. This means that using different CSS files may unintentionally impact other parts of the page.

To work around this issue, there are a few options available:

Implement BEM for naming class names.
Utilize cssModules. With cssModules, each element will have its own unique class name, minimizing the risk of styles affecting unintended elements unless the :global selector is used.
- css-module

Answer 2

Typically, webpack and similar build tools will consolidate all CSS files into one, even when CSS is imported from separate JSX files. This means that using different CSS files may unintentionally impact other parts of the page.

To work around this issue, there are a few options available:

Implement BEM for naming class names.
Utilize cssModules. With cssModules, each element will have its own unique class name, minimizing the risk of styles affecting unintended elements unless the :global selector is used.
- css-module

Answer 3

Answer №2

Avoid using html tags as css selectors, as it is considered a bad practice due to the described behavior.

It is recommended to use only css classes or inline styles. Using id's is also discouraged as they have high priority.

div {
  width: 20px;
  height: 20px;
}

#id {
  background: red;
}

.class {
  background: green;
}

<div id="id" class="class"></div>

When using css classes and encountering similar class names, consider utilizing css modules or css-in-js for resolution. BEM methodology can also be beneficial in such cases.

CSS modules will append a random hash to your classes, ensuring uniqueness and avoiding conflicts.

CSS-in-JS allows you to write styles with JavaScript, enabling dynamic styling based on requirements.

While pure CSS, SCSS, and PostCSS are options, many companies opt for either css modules or css-in-js for their projects.

BEM provides naming conventions for better organization of class names.

Lastly, when using inline styles in React, remember that {} constructs new objects on each call. To prevent unnecessary re-renders, define styles outside the component class.

Answer 4

Avoid using html tags as css selectors, as it is considered a bad practice due to the described behavior.

It is recommended to use only css classes or inline styles. Using id's is also discouraged as they have high priority.

div {
  width: 20px;
  height: 20px;
}

#id {
  background: red;
}

.class {
  background: green;
}

<div id="id" class="class"></div>

When using css classes and encountering similar class names, consider utilizing css modules or css-in-js for resolution. BEM methodology can also be beneficial in such cases.

CSS modules will append a random hash to your classes, ensuring uniqueness and avoiding conflicts.

CSS-in-JS allows you to write styles with JavaScript, enabling dynamic styling based on requirements.

While pure CSS, SCSS, and PostCSS are options, many companies opt for either css modules or css-in-js for their projects.

BEM provides naming conventions for better organization of class names.

Lastly, when using inline styles in React, remember that {} constructs new objects on each call. To prevent unnecessary re-renders, define styles outside the component class.

Answer 5

Answer №3

Avoid defining your CSS using HTML tags as it can have a global impact on your application.

Instead, consider using className, id, or inline styling methods.

For example: App.css

.myApp { color: red; }
#myApp2 { color: blue; }

App.js

import './App.css'

<div className="myApp">Color changed by className</div>
<div id="myApp2">Color changed by id</div>
<div style={{color:'red'}}>Color changed by inline object styling</div> // inline styling

Answer 6

Avoid defining your CSS using HTML tags as it can have a global impact on your application.

Instead, consider using className, id, or inline styling methods.

For example: App.css

.myApp { color: red; }
#myApp2 { color: blue; }

App.js

import './App.css'

<div className="myApp">Color changed by className</div>
<div id="myApp2">Color changed by id</div>
<div style={{color:'red'}}>Color changed by inline object styling</div> // inline styling

Answer 7

Answer №4

If you're looking to streamline your CSS imports/loads, this may not be the ideal solution for you.

However, if you prefer a quick fix without delving too deep into CSS, this method could work best for you while allowing you to continue working with HTML tags.

One approach is to add a div for each component, assign an ID to the div, and wrap the component within it. This way, in the component's CSS files, you can define all styles starting with the #ID selector to ensure that only the corresponding component is affected by the CSS classes or HTML tags.

Answer 8

If you're looking to streamline your CSS imports/loads, this may not be the ideal solution for you.

However, if you prefer a quick fix without delving too deep into CSS, this method could work best for you while allowing you to continue working with HTML tags.

One approach is to add a div for each component, assign an ID to the div, and wrap the component within it. This way, in the component's CSS files, you can define all styles starting with the #ID selector to ensure that only the corresponding component is affected by the CSS classes or HTML tags.

What is the best way to utilize multiple .css files on distinct components within a React application?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for adding a class to the output of a jQuery ajax request?

Using PHP's header function to alter directories

Next.js allows for the wrapping of a server component within a client component, seamlessly

The state variable hook fails to increase while in the closure

Is a backend necessary for my ReactJS web application?

Having trouble accessing the `name` property of null when using the autocomplete feature in Material UI

Trouble with Two Divs Layout

Aligning text at the center using bootstrap

The mysterious height phenomenon when setting the width of a list item with jQuery

utilizing a Bootstrap modal element throughout multiple HTML documents

Tips for displaying a loading indicator above a form

Exploring the world of colored tab links in CSS

Is there a way to activate the final form when submitted?

What is the process for creating a transparent default color theme in MUI?

Is there a way to allow scrolling in only one direction using CSS?

Interactive Map Using HTML5, CSS, and JQuery

Customizing font size in React with Material UI: A comprehensive guide on adjusting the font size of the Select component

Select a division and retrieve the identification of a different division

Utilize the functionality of the acuityscheduling API to streamline your

React Query: obtaining the status of a query