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

Question

假设我有以下带有情绪的 css`` prop 的代码：<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))};`}>但是，这也是不可能的，因为var(--bg)在 javascript${ }范围内无法访问CSS 自定义属性。有没有简单直接的解决方案来解决这个问题？

Answer 1

它可以帮助;)

document.querySelector('button').addEventListener('click', () => {

  document.body.style.setProperty('--color', 'blue')

})

:root {

  --color: red;

}

body {

  background: var(--color)

}

<button>TEST</button>