javascript - 如何基于布尔属性有条件地在 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（包含topandright属性），但不继承.right.openedand .right.closed。

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

标签： javascriptcssreactjssassjsx

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.

你可以查看我的演示。