在Gatsby中有条件地动态更改样式变量

Question

我正在将一个使用手柄、scs、express、jquery和mongodb的应用程序移植到Gatsby。我有一个_variables.css文件，它被导入到我的所有scs模块中。我想根据我们使用的数据库有条件地调整它。如果我们使用X数据库，那么该数据库的某些颜色的变量会发生变化，如果我们使用Y数据库，那么我们将为该数据库使用适当的颜色，等等。检查我们使用的数据库目前并不重要，我只想找到一个更改这些变量或更改将要使用的变量文件的解决方案。

我的变量文件如下所示。

/*
* Theme
*/
$main-color: rgb(222, 2, 2);
$main-color-darker: rgb(209, 0, 0);
$secondary-color: rgb(2, 19, 133);
$secondary-color-darker: rgb(220, 48, 5);
$main-background-color: rgb(242, 242, 242);
$root-background-color: rgb(225, 225, 225);
$background-color-light: rgb(254, 254, 254);
$navbar-background-color: $main-color;
$footer-background-color: rgb(29, 29, 29);
$background-color-darken-subtle: rgba(0, 0, 0, 0.025);
$dark-overlay: rgba(0, 0, 0, 0.7);
$card-name: rgba(0, 0, 0, 0.6);
$box-shadow-banner: 0 0 10px 3px rgba(0, 0, 0, 0.15);
$box-shadow-card: 1px 1px 5px 0 rgba(0, 0, 0, 0.15);
$text-shadow: 1px 1px 0.15rem rgba(0, 0, 0, 0.85);
$border: 1px solid rgba(0, 0, 0, 0.15);
$border-main-color: 1px solid $main-color;
$border-radius: 5px;

它被导入到我的scs模块中，如下所示：

@import "_variables.scss";
/***
* Navbar
* -
*/
.navbar {
display: flex;
flex-direction: column;
background-color: $navbar-background-color;
}

我已经考虑过将变量作为道具对象传递给像这样的组件

//In a layout component
const variables = {
maincolor: "blue",
}
const Layout = ({ children }) => {
return (
<>
<Navbar variables={variables} />
//...more code

//in the navbar component
const Navbar = props => {
return (
<nav
style={{ backgroundColor: props.variables.maincolor }}
className={styles["navbar"]}
>
//...more code

我想我可以检查一下我使用的数据库，并使用if语句根据使用的数据库调整变量对象及其键和值，但之后我必须遍历每个组件中的每个元素，并在使用scss变量的地方添加内联css，所以这似乎不是一个可行的选择。

我还考虑过有多个可变文件，

_variablesDB1.scss
_variablesDB2.scss
_variablesDB3.scss

然后在某个地方检查所使用的数据库，并在gatsby-node.config中使用fs.rename将我们要使用的变量文件重命名为"_变量.scs"；。问题是，我如何将变量文件重命名为_variablesDB1，这可能是可能的，但我的直觉告诉我这可能是一个糟糕的做法，不是一个好的解决方案。

唯一想到的另一个解决方案是用类似样式组件的东西将所有scs移植到js中的css，然后拥有一个变量对象，并根据使用的DB或某种条件(可能是状态(对其进行更改。在过去的几天里，我一直在研究这个问题，但无法找到解决方案。感谢您抽出时间。

Answer 1

您可以使用"css变量"而不是scss变量，并在运行时覆盖其值。最大的优点是，它不需要编译。

//主题1

[data-theme='theme1']
--main-color: rgb(222, 2, 2);
--main-color-darker: rgb(209, 0, 0);

//主题2

[data-theme='theme2']
--main-color: rgb(0, 0, 8);
--main-color-darker: rgb(103, 0, 0);

在将要使用样式的组件中。根据当前选择的主题，css变量将自行更新。

background-color: var(--main-color);