在React中实现mixBlendMode效果的可行方法有哪些？

我希望通过样式为特定图片设置不同的mixBlendMode值，但React似乎无法解析mixBlendMode参数，请问有哪些可行的解决办法？

相关代码片段 #

...
return ({
  backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
  color: 'white',
  mixBlendMode: 'difference'
});

完整App代码 #

import React from 'react';
import SwiperImagesStack from './media/swiper-images/SwiperImagesIndex';
import SwiperTexts from './SlideTexts';
import './css/MainSwiper.css';
import { Navigation, Pagination, Scrollbar, A11y, EffectFade } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';


export default function MainSwiper() {
  const CaseFotos = [19, 2, 3, 3, 5, 8, 8, 2, 1, 2, 4, 5, 4, 7, 18, 4, 5, 3, 6, 4, 3, 5];
  
   const mybg = (m, index) => {
    if (index === 0) {
      if ([10, 13].includes(m) === true) {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
                  justifyContent: 'flex-end',
                  alignItems: 'flex-end' });
        }
      else if ([1, 4, 6, 11, 12, 15, 17, 18].includes(m) === true) {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
                  justifyContent: 'flex-start',
                  alignItems: 'flex-end' });
        }
      else if ( m === 16) {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
                  justifyContent: 'flex-end', 
                  alignItems: 'flex-start' });
      }
      else {
        return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')` });
      }
    }
    else {
      return ({ backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
    color: 'white',
    mixBlendMode: 'difference' });
    }
  }


  return (
  
    <Swiper
      modules={[Navigation, EffectFade]}
      navigation
      speed={900}
      slidesPerView={1}
      loop
      className="MainSwiper">
        {CaseFotos.map((n, index) => 
          <SwiperSlide className='SwiperSlide'  id={`case${index}`} style={mybg(Math.floor(Math.random() * (n-1)), index)} >
            <div className='categoryWrapper'>
              <h2 className="case-text">
                <strong> {`${SwiperTexts[index]}`} </strong>
                  <button>
                    <span>
                      <span>
                        <span data-attr-span="See how">
                          See how
                        </span>
                    </span>
                    </span>
                  </button>
              </h2>
            </div>
          </SwiperSlide>)
        }
    </Swiper> 
  );
}

可行解决办法 #

1. 确认样式应用到正确的元素 #

mixBlendMode需要作用在包含背景图和内容的元素上。如果SwiperSlide的背景是通过CSS伪元素（如::before）实现的，内联样式无法直接控制伪元素，这时候改用CSS类来实现：

• 第一步：在MainSwiper.css中添加类样式

.blend-difference {
  mix-blend-mode: difference;
  color: white;
}

• 第二步：在React组件中动态给SwiperSlide添加类

<SwiperSlide 
  className={`SwiperSlide ${index !== 0 ? 'blend-difference' : ''}`}
  id={`case${index}`} 
  style={mybg(Math.floor(Math.random() * (n-1)), index)} 
>

2. 检查样式优先级是否被覆盖 #

打开浏览器开发者工具（F12），查看SwiperSlide元素的样式面板，确认mixBlendMode是否被划掉（说明被其他CSS类的样式覆盖）：

• 如果是优先级问题，可调整CSS选择器的特异性，比如用#case${index}.SwiperSlide作为选择器；
• 应急情况下可以给内联样式添加!important（不推荐长期使用）：

return ({
  backgroundImage: `url('${SwiperImagesStack[index][m]}')`,
  color: 'white',
  mixBlendMode: 'difference !important'
});

3. 将混合样式应用到内容元素 #

如果背景图是SwiperSlide的属性，但混合效果需要作用在文字上，直接给内容容器添加样式：

<div className='categoryWrapper' style={index !== 0 ? { mixBlendMode: 'difference', color: 'white' } : {}}>

4. 验证属性值的有效性 #

确认mixBlendMode的值是CSS支持的有效值，比如'difference'、'multiply'、'screen'等，避免拼写错误。

内容的提问来源于stack exchange，提问作者Mitya Vasyukov