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中的内联样式创建多个回退属性？

2 个答案: