如何用CSS-in-JS修改CSS自定义属性颜色？Emotion背景加深求助

这个问题确实挺常见的——当CSS变量遇上JS样式工具时，总会有这种“跨域”的尴尬。这里有几个简单直接的方案，你可以按需选择：

方案1：用CSS原生filter属性（最简便） #

直接利用CSS的filter属性里的brightness()函数来调暗颜色，完全不需要JS介入，直接在Emotion的css块里写就行：

<div css={css` 
  background: var(--bg); 
  filter: brightness(0.8); /* 数值越小颜色越暗，0.8即调暗20% */
`}>

如果觉得单纯的brightness不够精准，也可以搭配saturate()微调，避免颜色变灰：

<div css={css` 
  background: var(--bg); 
  filter: saturate(0.9) brightness(0.8);
`}>

⚠️ 注意：filter会作用于整个元素（包括里面的文字、子元素），如果只想改变背景色，这个方案适合背景上没有复杂内容的场景。

方案2：用CSS color-mix函数（更精准，现代浏览器支持） #

CSS原生的color-mix函数可以直接基于原颜色混合黑色来加深，不会影响元素其他内容，颜色变化更可控：

<div css={css` 
  background: color-mix(in srgb, var(--bg), black 20%); 
  /* 20%表示混合20%的黑色，数值越大颜色越深 */
`}>

这个方法的优势是只作用于背景色本身，而且计算逻辑直观，目前主流浏览器（Chrome、Firefox、Safari 15.4+）都支持。

方案3：JS动态获取CSS变量值（适合必须用JS处理的场景） #

如果你的业务逻辑必须用JS来计算加深比例，可以通过getComputedStyle获取CSS变量的实际值，再传给polished的darken函数：

import { useState, useEffect } from 'react';
import { darken } from 'polished';

const DarkenedDiv = () => {
  const [bgColor, setBgColor] = useState('');

  useEffect(() => {
    // 获取根元素上的--bg变量值，也可以获取目标元素的样式
    const rootStyles = getComputedStyle(document.documentElement);
    const bgValue = rootStyles.getPropertyValue('--bg').trim();
    setBgColor(bgValue);
  }, []);

  // 兜底用原变量，避免初始加载时无颜色
  const finalBg = bgColor ? darken(0.2, bgColor) : 'var(--bg)';

  return <div css={css` background: ${finalBg}; `}>内容</div>;
};

⚠️ 注意：如果--bg是动态变化的，你需要监听变量变化并更新bgColor状态，相对前两个方案麻烦一些，适合特殊场景。

内容的提问来源于stack exchange，提问作者David Deprost