如何通过 React 中的内联样式创建多个后备属性？

Question

例如，我有以下 CSS：

.myClass {
  background: -moz-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #FFF 0%,  #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

我正在创建一个带有渐变的图像。请注意，我需要使用三个background 属性来处理对不同浏览器的支持。我将如何在 React 中使用内联样式来做到这一点？

我知道 React 中的内联样式接受一个字典来表示我们的 CSS 样式，但在这种情况下，我最终会得到重复的 background 键。例如，在这种情况下，这将是我的字典：

const stylesDict = {
  background: "-moz-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* FF3.6-15 */
  background: "-webkit-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* Chrome10-25,Safari5.1-6 */
  background: "linear-gradient(to right, #FFF 0%,  #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

那么在这个例子中，如何在仍然支持多个浏览器的同时避免重复键？

请注意，除非我可以将 background 属性分解为一个单独的渐变属性和一个单独的图像属性，否则我仍然需要通过内联 Javascript 完成所有这些操作，因为图像会根据代码。

Answer 1

您可以像这样使用 jss 的内联前缀扩展： https://github.com/rofrischmann/inline-style-prefixer

Answer 2

const stylesDict = {
  background: "-moz-linear-gradient(left, #FFF 0%, #000 100%), -webkit-linear-gradient(left, #FFF 0%, #000 100%), linear-gradient(to right, #FFF 0%,  #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg')"
}