Javascript 基于状态变量导入不同的SCSS文件

我有一个状态变量：

this.state = {
    theme: "light"
}

此状态被添加到divs类名中，因此

我还有三个scss文件：App.scss、LightTheme.scss和DarkTheme.scss。app.scss必须导入一个主题scss文件，因为它们有一些组成主题的颜色变量

我尝试使用scss的if语句，但发现scss不能用于检查元素是否包含特定的类名

使用JavaScript导入主题文件也不起作用，因为app.scs将有未定义的变量

---

有什么想法吗？

您可以导入这三个文件，并将

主题添加到
App.js
中的第一个div中，如下所示：

函数应用程序（）{
返回(
...
);
}

您可以导入所有三个
scss
文件，然后在内部说DarkTheme.scss您可以执行以下操作：

// ThemeDark.scss
.theme-dark {

  h1 {
    color: white;
  }

  .navigation {
     background-color: darkblue;
  }
}

等等。在我的例子中，我总是使用light版本作为默认的“始终导入”，但按照您的建议，使用与主题无关的css文件可能是一个很好的划分：

// App.scss
h1 {
   font-size: 2em;
}

.navigation {
   position: absolute;
}

您不能将
App.scss导入到
LightTheme.scss
中，以及导入到
黑暗主题.scss
中作为第一行吗

@import "../../App.scss";  /*add path to App.scss*/

然后，您可以调用
LightTheme.scss
或
DarkTheme.scss
，这应该可以按照您的预期工作


编辑
“我的所有样式都在app.scss中。主题文件仅包含颜色变量。”

创建一个新文件light theme.scss


把这两行加进去

@import "../../LightTheme.scss";  /*variables*/
@import "../../App.scss";  /*styles*/

@import "../../DarkTheme.scss";  /*variables*/
@import "../../App.scss";  /*styles*/


创建另一个新文件暗主题.scss


把这两行加进去

@import "../../LightTheme.scss";  /*variables*/
@import "../../App.scss";  /*styles*/

@import "../../DarkTheme.scss";  /*variables*/
@import "../../App.scss";  /*styles*/


现在只需按计划调用light-theme.scss或dark-theme.scss。
我尝试过这样做，但import语句不在
类应用程序扩展组件{…}
的范围内，因此它不知道
主题的状态。我只是添加了另一种方法来帮助您解决这个问题。检查编辑部分。所有我的样式都在app.scss中。主题文件仅包含颜色变量。我考虑过按照你建议的方式来做，但稍后我会为不同的组件添加更多的scss文件，所以我会一遍又一遍地写颜色。是的，确实有很多重复。您可以使用CSS变量，或者，上一篇文章似乎是一种有趣的方法，因为您只需要定义一个文件。在我的例子中，我通常定义一个colors.scss文件，以便我可以执行$gray\u dark或$gray\u 50等操作。