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

Question

假设我有下面的代码，带有情感的css prop：

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

但是我想把这个div的背景变暗一点。

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

另一种选择是使用javascript darken函数，例如polished.js中的函数：

import { darken } from "polished";

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

但是，这也是不可能的，因为在javascript ${ }作用域中不能访问像var(--bg)这样的CSS自定义属性。

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

Answer 1

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

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

Answer 2

它可以提供帮助;)

​

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

:root {
  --color: red;
}

body {
  background: var(--color)
}

<button>TEST</button>

​