Question

我正在尝试使用css模块为元素使用多个类。我该怎么做？

function Footer( props) {
    const { route } = props;
    return (
        <div className={styles.footer}>
            <div className={styles.description, styles.yellow}>
              <p>this site was created by me</p>
            </div>
            <div className={styles.description}>
              <p>copyright nz</p>
            </div>
        </div>
    );
}

Answer 1

您可以使用css模块添加多个类，如下所示：

className={`${styles.description} ${styles.yellow}`}

e.g。

function Footer( props) {
    return (
        <div className={styles.footer}>
            <div className={`${styles.description} ${styles.yellow}`}>
              <p>this site was created by me</p>
            </div>
        </div>
    );
}

使用react-css-modules可以使用普通的类名语法：

<div styleName='description yellow'>

并为多个班级指定allowMultiple: true

Answer 2

我强烈建议使用classnames软件包。它非常轻巧（最小600字节）并且没有依赖项：

import classnames from 'classnames';

Function footer(props) {
  ...
  <div className={classnames(styles.description, styles.yellow)}>
}

它甚至还有一个额外的好处，就是可以有条件地添加类名（例如，添加黑暗主题类），而不必连接可能会意外添加{{1} }或undefined类：

false

Answer 3

您可以使用将与空格连接的数组。即

<div className={[styles.App, styles.bold, styles['d-flex-c']].join(' ')}>

与使用建议的模板文字（如@ steven iseki ）相比，我更喜欢这样做，因为添加和删除类更容易，而不必每次都将它们包装在${}中。

但是，如果由于某种原因要向许多元素中添加很多类，则可以编写更高阶的函数以使其变得更简单

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

console.log(styles);
// sample console output =>
// {
//   App: 'App_App__3TjUG',
//   'd-flex-c': 'App_d-flex-c__xpDp1',
// }


// func below returns a function that takes a list of classes as an argument
// and turns it in an array with the spread operator and reduces it into a spaced string

const classLister = styleObject => (...classList) =>
  classList.reduce((list, myClass) => {
    let output = list;
    if (styleObject[myClass]) {
      if (list) output += ' '; // appends a space if list is not empty
      output += styleObject[myClass]; 
      //Above: append 'myClass' from styleObject to the list if it is defined
    }
    return output;
 }, '');

const classes = classLister(styles); 
// this creates a function called classes that takes class names as an argument
// and returns a spaced string of matching classes found in 'styles'

用法

<div className={classes('App', 'bold', 'd-flex-c')}>

看起来非常整洁和可读。

呈现给DOM后，它变成

<div class="App_App__3TjUG App_d-flex-c__xpDp1">
/* Note: the class 'bold' is automatically left out because
   in this example it is not defined in styles.module.css 
   as you can be observe in console.log(styles) */

符合预期

并且可以通过将条件生成的类放入数组中来与条件条件一起使用，该数组通过...传播运算符

用作类的参数。

事实上，在回答这个问题时，我决定发布一个npm模块，因为为什么不这样做。

通过

获取

npm install css-module-class-lister

Answer 4

//您应该添加括号（为数组），并且要删除“，”也添加 join

function Footer( props) {
const { route } = props;
return (
    <div className={styles.footer}>
        <div className={ [styles.description, styles.yellow].join(' ') }>
          <p>this site was created by me</p>
        </div>
        <div className={styles.description}>
          <p>copyright nz</p>
        </div>
    </div>
);

}

Answer 5

对于className属性前面的合并类名，可以使用“ clsx”，

import clsx from 'clsx';
// Strings
clsx('foo', 'bar', 'baz'); // 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:true });// 'foo baz'

您可以从以下地址找到该软件包： https://github.com/lukeed/clsx

Answer 6

作为Yuan-Hao Chiang的answer的补充，以下功能使其更易于使用：

const classes = (classNames: Array<string> | string): string => classnames((Array.isArray(classNames) ? classNames : classNames.split(' ')).map(x => styles[x]));

此操作将采用数组或字符串（然后将其拆分为字符串数组），并返回最终的类名（由于使用导入的styles对象，因此它的作用域为当前模块）当然）。

您可以这样使用它：

<div className={classes(['description', 'dark-theme', 'many', 'more', 'class-names'])}>

或者，如果愿意，请指定一个字符串（在使用TailwindCSS时使用多个类的情况下很方便）：

<div className={classes('description dark-theme many more class-names')}>

Answer 7

安装 classnames 包以将 classNames 连接在一起

npm install classnames --save

解决方案：

import cx from 'classnames';

Function footer(props) {
 ...
 <div className={cx(styles.description, styles.yellow)}>
}

Answer 8

如果您正在使用 classnames 包并且想要有条件地应用样式，则需要使用带括号的动态属性键，如下所示：

<div className={classNames(styles.formControl, { [styles.hidden]: hidden })}>
</div>

Answer 9

简单做

data

字符串连接

Answer 10

我认为它的className = {[styles.description，styles.yellow]}。

Answer 11

为什么不定义具有多个样式的附加类？像

div .descyellow{
  background_color: yellow;
  style...
}

然后

<div class="descyellow">

使用css模块如何定义多个样式名称

11 个答案: