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

【问题标题】：Dynamically change style variables conditionally in Gatsby在 Gatsby 中有条件地动态更改样式变量
【发布时间】：2020-07-30 06:45:33
【问题描述】：

我正在将一个使用车把、scss、express、jquery 和 mongodb 的应用程序移植到 Gatsby。我有一个 _variables.scss 文件，它被导入到我所有的 scss 模块中。我想根据我们使用的数据库有条件地调整它。如果我们使用 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;

像这样导入我的 scss 模块：

@import "_variables.scss";

/***
 * Navbar
 * -
 */

.navbar {
  display: flex;
  flex-direction: column;
  background-color: $navbar-background-color;
}

我考虑过将变量作为 props 对象传递给这样的组件

//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 将我们要使用的变量文件重命名为“_variables.scss”。问题是我将如何重命名该变量文件回说 _variablesDB1，这可能是可能的，但我的直觉告诉我这可能是一种不好的做法，而不是一个好的解决方案。

想到的唯一其他解决方案是将所有 scss 移植到带有样式组件之类的 js 中的 css，然后拥有一个变量对象并根据使用的 DB 或某种条件（可能带有状态）更改它。这几天我一直在研究这个问题，但无法提出解决方案。感谢您的宝贵时间，谢谢。

【问题讨论】：

什么时候知道要加载哪些样式？构建还是运行时？你能详细解释一下吗？
在编译时我们将加载正确的数据库和样式。我正在考虑为此使用 Gatsby 主题。你怎么看？

标签： css sass gatsby

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

【讨论】：