React - 过滤器内联样式的多个属性

Question

filter应用于 React 中对象的属性是否可以styles设置多个过滤器值？

saturation = 25;
blurAmount = 5;
brightness = 25;
opacity = 0.85;
let styles = {
    backgroundImage: `url(${imageUrl})`,
    WebkitFilter: `brightness(${brightness}%) saturation(${saturation}%) blur(${blurAmount}px)`,
    filter: `brightness(${brightness}%) saturation(${saturation}%) blur(${blurAmount}px)`,
    opacity: opacity
};

在上面的代码中，当我将内联样式添加到组件时，只有opacity和属性得到正确设置。backgroundImage

Answer 1

我不确定当时的反应是否支持设置多个值，但当前版本支持。

鉴于过滤器值只是一个字符串，我认为它也可能能够返回。

您的过滤器似乎未正确渲染，因为您拼写错误saturate为saturation。修复后即可正确显示。

let saturation = 25;
let blurAmount = 5;
let brightness = 25;
let styles = {
    WebkitFilter: `brightness(${brightness}%) saturate(${saturation}%) blur(${blurAmount}px)`,
    filter: `brightness(${brightness}%) saturate(${saturation}%) blur(${blurAmount}px)`
};