how to use css module without modifying class names in react

Question

I am planning on using css modules with my react project and i quickly found out how ugly things can get when one is required to start changing classnames to use the css modules

lets say i have a component using regular css

import React from 'react'
import "./styles.css";

const About = () => {
    return (
      <div>
        <h1 class="title">CSS Modules</h1>
          <span class="select2-selection select2-selection--single dropdown-container" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-static-cooldown-container">
          <span class="select2-selection__rendered" id="select2-static-cooldown-container" role="textbox" aria-readonly="true" title="1 hour">
            <span>
              <div class="icon icon-time-2"></div> 1 hour
            </span>
          </span>
          </span>

      </div>
    );
};

export default Dashboard;

but when i am using css modules in a component, i have to modify the class names

import React from 'react'
import styles from "./styles.module.css";

const About = () => {
    return (
      <div>
        <h1 class={styles.title}>CSS Modules</h1>
          <span class="select2-selection select2-selection--single dropdown-container" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-static-cooldown-container">
          <span class="select2-selection__rendered" id="select2-static-cooldown-container" role="textbox" aria-readonly="true" title="1 hour">
            <span>
              <div class="icon icon-time-2"></div> 1 hour
            </span>
          </span>
          </span>

      </div>
    );
};

export default Dashboard;

How should this be?

besides the class name, what about the other css elements/attributes like id? et cetera. What about multiple classes in the class name? Will i have to modify all of those too?

is there a way to use css modules without modifying class names?

I have looked around and haven't found anything, most people just follow along and continue to modify class names but a part of me is thinking there has to be a better way because that is really ugly

Sowam · Accepted Answer · 2021-07-24 17:56:17Z

2

If you really want to see similar code you can make:

const About = () => {
    const {title} = styles;

    return (
      <div>
        <h1 className={title}>CSS Modules</h1>
      </div>
    );
};

so now you only change "" for {}

answered Jul 24, 2021 at 17:56

Sowam

1,7665 gold badges16 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

uberrebu Over a year ago

very good..but will be a great world if no need to change "" to {} :) but very good answer so far...thanks for this

uberrebu Over a year ago

how about multiple classes with this answer? how will i add multiple classes?

Pedro Henrique Over a year ago

css modules create classNames based on components, so you don't need to worry about multiple classes with the same name. To do that, it creates an object that has the real classNames as attributes (hence the styles.className syntax). If you use quotation marks (""), you will be setting the classNames as plain strings, not javascript objects, and css modules do not support it ATM. It's possible to make it work, but not worth the effort, I believe.

Pedro Henrique Over a year ago

The way I use multiple css module' classes on the same component is with string interpolation. Something like this: <div className={`${styles.classOne} ${styles.classTwo}`}>ExampleCodeHere</div>

uberrebu Over a year ago

am referring to multiple classes in the same class name like this for example <div className={`${headerStyles["bold"]} ${headerStyles["active"]}`}>Some text...</div>

|

ahmed abdikani · Accepted Answer · 2021-10-18 02:58:14Z

0

you can use Array.join for multiple classes to space them

const About = () => {
    const {title,otherClass} = styles;

// const className = [title,otherClass].join(' ');

      return (
      <div>
        <h1 className={[title,otherClass].join(' ')}>CSS Modules</h1>
      </div>
    );
};

answered Oct 18, 2021 at 2:58

ahmed abdikani

212 bronze badges

Collectives™ on Stack Overflow

how to use css module without modifying class names in react

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related