Javascript SASS中的动态类名

我是个新手。我想创建一个具有动态类名的元素，然后可以在我的SASS中轻松控制它。类似于下面两个psuedo示例中的一个。我如何在SASS中做到这一点？谢谢

例1：

---反应JS---

---无礼---

例2：

---反应JS---

---无礼---

---

您无法从React控制SASS，因为一旦您将其编译为CSS，它本质上是静态的

但是，如果您将SASS更改为以下内容，我认为您的第二个示例将起作用：

.menu {
  &.on {
    background-color: blue;
  }
  &.off {
    background-color: red;
  }
}

将编译为以下CSS：

.menu.on {
    background-color: blue;
}
.menu.off {
    background-color: red;
}

---

我认为如果您想在JS代码中完全控制css元素，您可能需要

样式化组件

，而不是sass

.menu {
  &.on {
    background-color: blue;
  }
  &.off {
    background-color: red;
  }
}

.menu.on {
    background-color: blue;
}
.menu.off {
    background-color: red;
}