React应用中如何移除body灰度滤镜下指定元素的灰度效果

你当前的方法行不通，因为给body加grayscale(100%)后，页面所有子元素都会受这个滤镜影响，子元素设置filter: none无法抵消父元素的滤镜——CSS滤镜是叠加生效的，父元素的滤镜会先作用于整个渲染内容，子元素的滤镜是在这个基础上再处理，所以没法直接清除。

推荐用以下两种方案解决：

方案一：使用全屏遮罩层（更简洁可靠） #

不要给body加滤镜，而是在弹窗下方添加一个全屏的遮罩div，给遮罩层设置灰度滤镜，弹窗放在遮罩层上方，这样只有遮罩层（即背景区域）是灰度，弹窗不受影响。

示例代码：

import { useEffect, useState } from 'react';

function LogoutModal() {
  const [isOpen, setIsOpen] = useState(false);
  const [opacity, setOpacity] = useState('opacity-0');

  useEffect(() => {
    if (isOpen) {
      requestAnimationFrame(() => {
        document.body.style.overflow = 'hidden';
        setOpacity('opacity-100');
      });
    } else {
      setOpacity('opacity-0');
      setTimeout(() => {
        document.body.style.overflow = '';
      }, 300); // 配合动画时长，避免弹窗消失时页面滚动跳动
    }
  }, [isOpen]);

  return (
    <>
      {/* 遮罩层 */}
      {isOpen && (
        <div className={`fixed inset-0 bg-black/50 grayscale-100 transition-opacity ${opacity}`}></div>
      )}
      {/* 弹窗 */}
      <div 
        id="logout"
        className={`fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg z-50 transition-opacity ${opacity}`}
      >
        <p>确定要退出登录吗？</p>
        <button onClick={() => setIsOpen(false)}>取消</button>
        <button onClick={() => {/* 退出逻辑 */}}>确定</button>
      </div>
      {/* 触发按钮 */}
      <button onClick={() => setIsOpen(true)}>退出登录</button>
    </>
  );
}

方案二：保留body滤镜的反向处理（不推荐，兼容性差） #

如果一定要给body加滤镜，需要给弹窗设置反向滤镜抵消，但这种方式依赖浏览器对滤镜叠加的处理，可能有兼容性问题：

修改你原有的代码：

useEffect(() => {
  if (isOpen) {
    requestAnimationFrame(() => {
      document.body.style.overflow = 'hidden';
      document.body.style.filter = 'grayscale(100%)';
      // 用反向滤镜抵消，确保优先级
      document.getElementById('logout').style.filter = 'grayscale(0%) !important';
      setOpacity('opacity-100');
    });
  } else {
    setOpacity('opacity-0');
    setTimeout(() => {
      document.body.style.overflow = '';
      document.body.style.filter = '';
    }, 300);
  }
}, [isOpen]);

注意：方案二效果不稳定，因为CSS滤镜的继承逻辑是父元素滤镜会影响整个子树渲染，子元素滤镜是叠加而非覆盖，所以优先推荐方案一。

内容的提问来源于stack exchange，提问作者Harshit Singh