如何使用 CSS-in-JS 改变 CSS 自定义属性颜色？答案

【问题标题】：How to mutate CSS custom property color with CSS-in-JS?如何使用 CSS-in-JS 改变 CSS 自定义属性颜色？
【发布时间】：2019-10-24 04:35:09
【问题描述】：

假设我有以下带有情感 css`` 属性的代码：

<div css={css`
  background: var(--bg);
`}>

但我想让这个 div 的背景变暗。

使用 sass 使用 darken() 函数会很简单，但我认为在情感中使用 sass 是不可能的？

另一种选择是使用 javascript 变暗功能，例如就像来自 Polish.js 的那个：

import { darken } from "polished";

<div css={css`
  background: ${darken(0.2, var(--bg))};
`}>

但是，这也是不可能的，因为在 javascript ${ } 范围内无法访问像 var(--bg) 这样的 CSS 自定义属性。

有没有简单直接的解决方案来解决这个问题？

【问题讨论】：

【解决方案1】：

它可以帮助;)

document.querySelector('button').addEventListener('click', () => {
  document.body.style.setProperty('--color', 'blue')
})

:root {
  --color: red;
}

body {
  background: var(--color)
}

&lt;button&gt;TEST&lt;/button&gt;

【讨论】：

【解决方案2】：

对于darken()，我能想到的最接近的是使用brightness()MDN Link

<div css={css`
  filter: brightness(80%);
`}>

【讨论】：

我认为这不是亮度（）函数的预期用途。实际上，我前段时间已经对此进行了探索，在这些情况下它是非常不可预测的。在这种情况下它肯定不起作用，因为仍然需要设置背景......