如何使用css模块而不修改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

Answer 1

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 {}

Answer 2

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>
    );
};