如何在 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

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')"
}

Answer 2

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

如何在 React 中通过内联样式创建多个回退属性？

How to create multple fallback attributes via inline styles in React?

javascript

css

inline-styles

reactjs