一个react HTML元素上的两个类

Question

我觉得这里有一个简单的答案，但我没有找到它-

在我的react头中，我在'styles'下导入样式表，并将css类引用为

<div className={styles.selectorname}>

但是我不明白，用这个符号，如何在一个元素上声明多个样式。不工作的例子:

<div className={styles.selectorname1} {styles.selectorname2}>

任何想法?

Answer 1

您可以使用扩展运算符来组合不同样式的对象。例如，让我们看一下这个css文件，它有几个声明。

.myColor {
color: DodgerBlue;
}
.myFont {
font-family: Arial;
text-align: center;
}

我们可以使用下面的语法将它们组合起来。

<div style={{...styles.myColor, ...styles.myFont}}>

类似地，您可以使用下面的代码来组合这些样式。样式也可以来自两个不同的文件。

<div style={{...styles.selectorname1, ...styles.selectorname2}}>

注:我们使用的...称为扩展算子。点击这里阅读更多关于扩展语法的信息。

Answer 2

如果这些是类名，那么您可以使用模板字符串(' ')

<div className={`${styles.selectorname1} ${styles.selectorname2}`}>

Answer 3

你确定你用了引号吗?例如:

<div className="{styles.selectorname1} {styles.selectorname2}">