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

【问题标题】：How to conditionally apply nested SCSS classes in ReactJS based on a boolean prop?如何基于布尔属性有条件地在 ReactJS 中应用嵌套的 SCSS 类？
【发布时间】：2019-09-22 02:39:56
【问题描述】：

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

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

SCSS 文件中的 sn-p：

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

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

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

【问题讨论】：

标签： javascript css reactjs sass jsx

【解决方案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。

【讨论】：

很高兴知道这一点，但我的问题仍然主要是我需要 [position] 元素是动态的 - 类似于：isOpen ? styles.[position]__opened : styles.[position]__closed，这是行不通的
啊哈 - 没关系，我使用相同的概念将它应用到我目前在 React .jsx 文件中设置的方式（如：&.opened 和 &.closed），并且有效正如预期的那样。非常感谢您的帮助！

【解决方案2】：

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

【讨论】：

还有什么我可以做的不涉及添加额外包的吗？