如何基于布尔属性有条件地在 ReactJS 中应用嵌套的 SCSS 类？

Question

我有一个侧边栏导航元素，我试图根据元素的位置在 React 中应用 SCSS 样式。这是我目前从模块导入的 CSS 类的组合：

styles.main,
styles[position],
isOpen ? styles.opened : styles.closed,

SCSS 文件中的片段：

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

我试图弄清楚如何正确应用 SCSS 样式。元素继承.main类和根选择器.right（包含top和right属性），但不继承.right.opened和.right.closed。

任何有关我哪里出错的帮助或指示将不胜感激。非常感谢！

Answer 1

您不必继承样式，而是组合它们。而不是：

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

你必须要做：

.right {
  top: 0;
  right: 0;

  &__opened {
    visibility: visible;
  }

  &__closed {
    visibility: hidden;
  }
}

然后，您将应用诸如isOpen ? styles.right__opened : styles.right__closed.

你可以查看我的演示。