如何基于布尔prop在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这样的类isOpen ? styles.right__opened : styles.right__closed isOpen ? styles.right__opened : styles.right__closed 。

你可以查看我的演示 。

Answer 2

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