javascript - 如何基于 bool 属性有条件地在 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.

可以查看my demo .