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

Question

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

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

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

使用sass可以通过darken（）函数很简单，但是我认为在情感中不能使用sass吗？

另一个选择是使用javascript变暗功能，例如就像来自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>