React App与css模块多个类

Question

我创建了一个基本的react应用:

import React from 'react';
import style from './Button.module.scss';

export default class Button extends React.Component {
render() {
return (
<button className={[style.class, 'awesome', 'great'].join(' ')}>
hello world
</button>
);
}
}

css/scss:

.class {
background: pink;
color: red;

/* not working */
&:is(.awesome) {
border-width: 2px;
}
/* not working either */
&.awesome {
border-width: 2px;
}
/* works */
&:not(.great) {
border-style: dotted;
}
}

问题:子类.awesome不工作，而.great工作正常。你能修复代码，使.awesome将工作。我需要一些。button的子类，这样我就可以在运行时切换它们。

这是浏览器上生成的CSS，.awesome不生成，.great生成。

.Button_class__1tDJY:not(.Button_great__3yeAv) {
border-style: dotted;
}
.Button_class__1tDJY {
background: pink;
color: red;
}

Answer 1

您应该通过您的styles对象传递在css模块中声明的类，而不是传递字符串:

<button className={[styles.class, styles.awesome, styles.great].join(' ')}>
hello world
</button>