如何使用 React 多次添加相同的 CSS 属性（例如背景图像）？答案

【问题标题】：How do I add the same CSS property (e.g. background-image) multiple times with React?如何使用 React 多次添加相同的 CSS 属性（例如背景图像）？
【发布时间】：2021-02-10 05:51:20
【问题描述】：

我想在 React 组件中做相当于 style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" 的操作。

React 要求我提供样式对象，而不是字符串。但是一个 JS 对象不能有两次相同的属性。

如何获得两个background-image 属性？此外，顺序很重要——图像集必须放在最后。

它必须是内联样式。（因为 URL 是从 DB 检索到的动态内插值。）

【问题讨论】：

你试过背景图片列表吗？ style="background-image: url(foo.jpg),-webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" 或者你是在问如何使用 React 的 style 属性来做到这一点？我有点不确定你在问什么。
@DrewReese 啊，如果我不清楚，对不起。是的，询问如何使用 React 的 style 道具，这需要我传递一个对象而不是字符串。我尝试过传递数组（style={ backgroundImage: [ … ] }（运气不好）并按照您描述的方式将两者都包含在一个background-image 属性中。后者几乎可以工作，但是WebKit 中的非图像集URL“获胜”或者有根据我选择的顺序，在非 WebKit（例如 Firefox）中根本没有图像。
@HenrikN 你能分享一下使用两个背景图像的用例吗？也许可以找到解决方法。使用对象不是解决方案。
@VinaySharma 我想在支持 (-webkit-)image-set 以平衡带宽/分辨率的浏览器中智能地获取 1x 或 2x 图像，并为 Firefox 等其他浏览器提供 1x 后备。我正在考虑将其设置为 not-a-bg-image 作为一种解决方法——但仍然很高兴知道如何在 React 中实现这一点。
它是否绝对需要是内联样式的道具对象？如果你可以做 CSS-in-JS 并编写你的 CSS as CSS 并将 props 传递给它，像 styled-components 这样的东西可以为你工作吗？

标签： css reactjs

【解决方案1】：

我想我最初误解了你的问题。似乎您正在寻找创建一个样式对象以作为道具传递给组件。您可以将背景图像组合成一个逗号分隔的列表。您可以使用字符串模板在运行时注入动态图像 url。

const style = {
  backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};

【讨论】：

谢谢。根据我上面的评论，这个 almost 有效，但是 WebKit 中的非图像集 URL“获胜”，或者非 WebKit（例如 Firefox）中根本没有图像，这取决于我选择的顺序.似乎它需要呈现为两个单独的“背景图像”属性。
对，我们几乎同时响应。好的，我需要考虑一下。

【解决方案2】：

GitHub 上的“spassvogel”有一个使用 CSS 变量的巧妙解决方案：https://github.com/facebook/react/issues/20757#issuecomment-776191029

想法是在style属性中设置CSS变量，比如

style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }

然后从外部样式表中使用它们，例如

background-image: var(--url1);

等等。

事实证明，这仍然不足以解决我想要的所有问题——这个兔子洞runs ever deeper——但这不是 React 的错，所以我会认为这是一个有效的答案。

【讨论】：