Using CSS Modules with ReactJS: Styling parent and child components separately

Question

Using CSS Modules with ReactJS: Styling parent and child components separately

I'm currently working on a React application and I have a question. I have two separate components: and with CSS classes navigation.css and navigationLogo.css respectively. In navigation.css, I defined a class called .main, and in navigationLogo.css, I want to create a class like this:

.main .main_in_logo {
 color: red;
}

However, I am facing limitations with CSS Modules that prevent me from achieving this. Any suggestions for a workaround?

css reactjs css-modules react-css-modules

Answer 1

Answer №1

It seems that the explanations provided here are lacking in detail. In CSS, you would use .parentSelector .childSelector to target a child element. The same principle applies to CSS modules, but in your HTML/JSX, you need to assign the relevant className to both the parent and child elements -> styles.parentSelector , styles.childSelector.

<div className={styles.container}>text</div>

This approach allows you to define styles in your CSS like:

.banner .container{
background-color:red;
}
.banner .container{
background-color:blue;
}

At times, when using libraries, you may need to make changes to elements deep inside the library without being able to modify its source code. In such cases, you can utilize the :global selector like this:

.parentElement :global(div)
.parentElement :global(#some-lib-element-selector)

Answer 2

It seems that the explanations provided here are lacking in detail. In CSS, you would use .parentSelector .childSelector to target a child element. The same principle applies to CSS modules, but in your HTML/JSX, you need to assign the relevant className to both the parent and child elements -> styles.parentSelector , styles.childSelector.

<div className={styles.container}>text</div>

This approach allows you to define styles in your CSS like:

.banner .container{
background-color:red;
}
.banner .container{
background-color:blue;
}

At times, when using libraries, you may need to make changes to elements deep inside the library without being able to modify its source code. In such cases, you can utilize the :global selector like this:

.parentElement :global(div)
.parentElement :global(#some-lib-element-selector)

Answer 3

Answer №2

After searching for a solution to the same problem and coming up empty here, I realized that the post is quite outdated at 3 years old. The accepted answer, in my opinion - shared by others as well, is not very scalable.

It may not be anything groundbreaking, but I ended up figuring out my own approach in vanilla CSS that could be adapted to CSS modules.

Here's what I came up with that perfectly meets my requirements:

/* parent.css */
.main {
   ...some CSS...
}

/* logo.css */
@value main from "./parent.css";

.logo {
   ...some CSS...
}

.main .logo {
   color: red
}

In this solution, we utilize @value, a CSS modules variable, which allows us to link with another file to construct a selector incorporating the actual name of the parent like "main".

Although it seemed unusual at first, discovering this approach did take some time. Hopefully, sharing this will save others time and assist them too!

Answer 4

After searching for a solution to the same problem and coming up empty here, I realized that the post is quite outdated at 3 years old. The accepted answer, in my opinion - shared by others as well, is not very scalable.

It may not be anything groundbreaking, but I ended up figuring out my own approach in vanilla CSS that could be adapted to CSS modules.

Here's what I came up with that perfectly meets my requirements:

/* parent.css */
.main {
   ...some CSS...
}

/* logo.css */
@value main from "./parent.css";

.logo {
   ...some CSS...
}

.main .logo {
   color: red
}

In this solution, we utilize @value, a CSS modules variable, which allows us to link with another file to construct a selector incorporating the actual name of the parent like "main".

Although it seemed unusual at first, discovering this approach did take some time. Hopefully, sharing this will save others time and assist them too!

Answer 5

Answer №3

It is best practice for the child component to have its own independent CSS rules, rather than relying on the parent's CSS classname.

In this case, the child component should simply be:

.main_in_logo { color: red; }

If there is a need for styles that involve both the parent and child components, it is recommended to define these styles entirely in the parent component:

/* navigation.css */
.main .main_in_logo {
   color: red;
}

The parent component can then pass the CSS class to the child component and instruct it to use it:

// Navigation.js
<NavigationLogo className={navigationCss.main_in_logo} />

// NavigationLogo.js
<div className={"foo " + this.props.className}>stuff</div>

Answer 6

It is best practice for the child component to have its own independent CSS rules, rather than relying on the parent's CSS classname.

In this case, the child component should simply be:

.main_in_logo { color: red; }

If there is a need for styles that involve both the parent and child components, it is recommended to define these styles entirely in the parent component:

/* navigation.css */
.main .main_in_logo {
   color: red;
}

The parent component can then pass the CSS class to the child component and instruct it to use it:

// Navigation.js
<NavigationLogo className={navigationCss.main_in_logo} />

// NavigationLogo.js
<div className={"foo " + this.props.className}>stuff</div>

Answer 7

Answer №4

Creating .main .main_in_logo is essential for maintaining the integrity of your CSS styles in the long run. By styling parent elements, you can prevent interference from other styles down the line. However, this becomes a challenge with CSS modules as your styles become permanently unique.

If you absolutely need to style these two components together, consider using global CSS. You can find more information on how to do this in the documentation for react-css-modules.

Answer 8

Creating .main .main_in_logo is essential for maintaining the integrity of your CSS styles in the long run. By styling parent elements, you can prevent interference from other styles down the line. However, this becomes a challenge with CSS modules as your styles become permanently unique.

If you absolutely need to style these two components together, consider using global CSS. You can find more information on how to do this in the documentation for react-css-modules.

Answer 9

Answer №5

When utilizing CSS modules in ReactJS, there is no need to explicitly state which child class you are targeting.

For example:

.main_in_logo {
     color: red;
}

This declaration will suffice in the stylesheet.

Answer 10

When utilizing CSS modules in ReactJS, there is no need to explicitly state which child class you are targeting.

For example:

.main_in_logo {
     color: red;
}

This declaration will suffice in the stylesheet.

Answer 11

Answer №6

I opted for a traditional CSS approach but implemented it using the BEM convention.

Essentially, CSS modules simply append '[this_name].module.css' to your css classes. If you inputted it correctly from the start, there would be no need for this. It's essentially an abstraction that helps beginners handle class name conflicts.

// Main.jsx
import './Main.css'
import Logo from './Logo.jsx'

const Main = () => {
  return (
    <div className="main">
      <Logo className="main__logo" />
    </div>
  )
}

/* Main.css */
.main {/* apply styles */}
.main__logo {/* apply specialized styles for the Logo component */}

For example, if you had a `Logo` component like this..

// Logo.jsx
import './Logo.css'

const Logo = () => {
  return (
    <div className="logo">
      <img className="logo__img" />
    </div>
  )
}

/* Logo.css */
.logo {/* style rules for logo */}
.logo__img {/* specific styling for the logo's image */}

This method feels more intuitive and organic.

Answer 12

I opted for a traditional CSS approach but implemented it using the BEM convention.

Essentially, CSS modules simply append '[this_name].module.css' to your css classes. If you inputted it correctly from the start, there would be no need for this. It's essentially an abstraction that helps beginners handle class name conflicts.

// Main.jsx
import './Main.css'
import Logo from './Logo.jsx'

const Main = () => {
  return (
    <div className="main">
      <Logo className="main__logo" />
    </div>
  )
}

/* Main.css */
.main {/* apply styles */}
.main__logo {/* apply specialized styles for the Logo component */}

For example, if you had a `Logo` component like this..

// Logo.jsx
import './Logo.css'

const Logo = () => {
  return (
    <div className="logo">
      <img className="logo__img" />
    </div>
  )
}

/* Logo.css */
.logo {/* style rules for logo */}
.logo__img {/* specific styling for the logo's image */}

This method feels more intuitive and organic.

Using CSS Modules with ReactJS: Styling parent and child components separately

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

having difficulty resolving the problem when utilizing bootstrap classes

Is it advisable to start a function within the componentDidMount() method in ReactJS when using promises?

Modify the fixed div's class when the user scrolls past a certain section

What is causing my page to automatically refresh whenever I click on buttons?

Sorting tables in Material UI by default

Encountering an issue in next.js with dynamic routes: getting a TypeError because the property 'id' of 'router.query' cannot be destructured since it is undefined

Having Trouble With Your Font Display?

Is there a way for me to adjust my navbar menu items so they are aligned to the right

Difficulty enforcing mandatory checkboxes

Encountering Typescript problem following the upgrade to create-react-app 4.0.0

Executing Javascript code from a specified web address

Develop a gallery similar to YouTube or Vimeo

Matching up irregular rows in div-made table

Ensure the background image within the ::before selector spans across the entire screen

Customize the height of a Textfield in React Material UI

Having difficulty populating a select input with data from the state

Setting up the Bootstrap grid structure

How to turn off a sticky header on Mobile using CSS

Utilize viewport activation to determine browser width

The CSS fullscreen background appears to function properly in Dev-tools, but fails to display correctly in an actual browser