React App 与 css 模块多个类

Question

我创建了一个像这样的基本反应应用程序：

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

you should pass the classes declared at your css modules through your styles object, instead of passing a string:

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