Javascript 如何将SASS父选择器与react中的SASS模块一起使用

考虑以下几点

styles.module.sass

Button.js

const MyButton = () => {
    return <button className={styles.button}>select this</button>;
};

---

你可以用构图

.button
     cursor: pointer
     background: transparent

.activeButton
     composes: button
     border-left-color: green
     border-left-width: 2px

然后在jsx中使用.activeButton

只需从styles.active之类的样式中选择活动类，并在加入时在类之间留出空间。为此，您可以执行以下任一操作：

您可以使用对className={styles.button++styles.active}的更改或使用模板字符串： 你可以用 您可以使用以下组件： 我个人更喜欢或有时结合使用。由于给代码带来了一个很大的抽象，所以在应用活动类时，您不需要关心将样式应用到每个地方，或者忽略它。它还允许只更改几行代码就可以在CSS/SCSS模块之间移动

---

关于使用的好处，请阅读他们的文档。当您有依赖于特定条件的类时，它非常方便。

我知道这一点，但这并不能回答问题

const MyButton = () => {
    return <button className={styles.button + "active"}>select this</button>;
};

.button
     cursor: pointer
     background: transparent

.activeButton
     composes: button
     border-left-color: green
     border-left-width: 2px

const MyButton = () => {
    return <button className={styles.activeButton}>select this</button>;
};

const MyButton = () => {
    return <button className={`${styles.button} ${styles.active}`}>select this</button>;
};

import classNames from 'classnames'
const MyButton = () => {
    return <button className={classNames(styles.button styles.active)}>select this</button>;
};

const MyButton = () => {
    return (
        <PatchStyles classNames={styles}>
            <button className="button active">select this</button>
        </PatchStyles>
    );
};