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

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

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

例如:。

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

使用 Response-css-模块，您可以使用普通的类名语法:

<div styleName='description yellow'>

并为多个类指定 allowMultiple: true

为什么不定义一个具有多种样式的附加类？ 喜欢

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

然后

<div class="descyellow">

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

<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

对于在 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

我强烈推荐使用 类名软件包，它非常轻便(缩小了600字节)而且没有依赖关系:

import classnames from 'classnames';


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

它甚至还有一个额外的好处，就是可以有条件地添加类名(例如，添加一个 黑暗主题类) ，而不必连接字符串，这样就可以意外地添加一个 undefined或 false类:

  <div className={classnames(styles.description, {styles.darkTheme: props.darkTheme })}>

您应该添加 方括号方括号，使 classNames 成为一个数组，并删除’,’添加 加入()。

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

作为对 蒋元浩的 回答的补充，以下功能使其更容易使用:

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

安装 classNames 包将 classNames 连接在一起

npm install classnames --save

解决方案:

import cx from 'classnames';


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

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

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

很简单

<div className={style.smallFont + " " + style.yellowColor}>

字符串连接字符串连接

对我来说，最好的解决方案是下面的函数。 因为通过解构参数，我可以返回带有空格的类。

export function clx(...classes) {
return classes.join(" ");
}
// className={clx('border', styles.form, styles.h1, 'classe-4')}
// class="border form_CDE h1_AB"

这可能很快就会失控:

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

我喜欢创建一个函数来设置类并调用:

const setClass = (classes: string[]) => {
return classes.map((className) => styles[className]).join(" ");
};
<article className={setClass(["student", "student-expand-view-layout"])}>

您可以使用带有空格(’)-> 的字符串串联

import classes from '../path/to/fileName.module.css'
<div className={classes.centerFlexY + ' ' + classes.searchTabs} />

ClassName 只是一个我们要传递的道具，这个道具需要一个字符串值，所以我们可以使用在 className 的{}块中生成字符串的每一个代码:

<div className={`${classes.imported} normalCssClass ${classes.another}`}

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

className={styles.description + ' ' + styles.yellow}

感谢 罗伊 · 亚当斯，我想建议这个解决方案

const joinClasses = (...classes: string[]) => {
return classes.map((className) => styles[className]).join(" ");
};


<article className={joinClasses("student", "student-expand-view-layout")}>