如何在React中将SASS父选择器与SASS模块一起使用

问题描述

请考虑以下内容

styles.module.sass

 .button
     cursor: pointer
     background: transparent
     &.active
       border-left-color: green
       border-left-width: 2px

Button.js

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

假设这是一个scss模块，如何在.active内附加className类？以下内容将不起作用，因为'active'不在类名重写的上下文中。

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

解决方法

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

1. 您可以更改为 className={styles.button + " " + styles.active} 或使用模板字符串：

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

2. 您可以使用 classnames

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

3. 您可以使用 patch-styles 组件：

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

我个人更喜欢 patch-styles 或有时 classnames 与 patch-styles 结合使用。由于 patch-styles 为您的代码带来了很大的抽象，因此您无需关心将样式应用到每个地方，而在应用活动类时却忽略了它。它还允许通过更改几行代码来移入或移出 CSS/SCSS 模块。

关于使用 classnames 的好处，请阅读他们的文档。当您有依赖于某些条件的类时，这很方便。

,

您可以使用合成

.button
     cursor: pointer
     background: transparent

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

然后在jsx中使用.activeButton

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