css - 如何使用 React 多次添加相同的 CSS 属性(例如背景图像)？

Question

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

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

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

它需要是内联样式。 (因为 URL 是从数据库中检索到的动态内插值。)

Answer 1

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

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