如何使用css模块而不修改react中的类名

如何解决如何使用css模块而不修改react中的类名

我计划在我的 react 项目中使用 css 模块，我很快发现当需要开始更改类名以使用 css 模块时，事情会变得多么丑陋

假设我有一个使用常规 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;

但是当我在组件中使用 css 模块时，我必须修改类名

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;

这应该怎样？

除了类名之外，其他 css 元素/属性（如 id）呢？ 等等。 类名中的多个类怎么样？我是否也必须修改所有这些？

有没有办法在不修改类名的情况下使用css模块？

我环顾四周并没有发现任何东西，大多数人只是跟着并继续修改类名，但我的一部分在想必须有更好的方法，因为那真的很丑

解决方法

如果你真的想看到类似的代码，你可以：

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

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

所以现在您只需将 "" 更改为 {}