如何基于布尔属性在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和{ {1}}。

对于我要去哪里的任何帮助或指示，将不胜感激。非常感谢你！

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的类。

您可以选中my demo。

Answer 2

使用classnames实用程序，这是当前推荐的在ReactJs中处理条件CSS类名称的方法。