根据状态变量导入不同的SCSS文件

Question

我有这个状态变量：

this.state = {
    theme: "light"
}

此状态被添加到divs类名中，因此它变为 <div class name=`app ${this.state.theme}`>

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

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

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

有什么想法吗？

Answer 1

您可以导入三个文件，并将theme类添加到App.js中的第一个div中，如下所示：

function App() {

  return (
    <div className={`App theme-${this.state.theme}`}>
    ...
    </div>
  );
}

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

// ThemeDark.scss
.theme-dark {

  h1 {
    color: white;
  }

  .navigation {
     background-color: darkblue;
  }
}

// ThemeLight.scss
.theme-light {

  h1 {
    color: black;
  }

  .navigation {
     background-color: lightgray;
  }
}

等等就我而言，我总是使用浅色版本，因为始终导入默认版本，但是按照您的建议进行此操作可能是一个很好的选择，并且有一个主题无关的css文件：

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

.navigation {
   position: absolute;
}

Answer 2

您不能将 App.scss 导入到LightTheme.scss并也导入到DarkTheme.scss作为第一行吗？

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

然后，您可以调用LightTheme.scss或DarkTheme.scss，它们应该会按预期工作。

---

编辑

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

1. 创建一个新文件 light-theme.scss

2. 在其中添加这两行。

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

3. 创建另一个新文件 dark-theme.scss

4. 在其中添加这两行。

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

现在只需按计划调用 light-theme.scss 或 dark-theme.scss 。