3

假设我有以下带有情感 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))};
`}>

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

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

4

2 回答 2

0

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

<div css={css`
  filter: brightness(80%);
`}>
于 2019-06-09T14:30:41.127 回答
0

它可以提供帮助;)

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

body {
  background: var(--color)
}
<button>TEST</button>

于 2019-06-10T00:26:02.313 回答