React - 线性渐变内联样式供应商前缀

Question

如何在反应中使用线性渐变供应商前缀？ 是否可以在不使用任何外部包的情况下做到这一点？

这不起作用，因为一个对象不能有同名的键，所以没有样式应用于 div。

我不能使用类，因为我将在这段代码中使用组件变量。

      const sizeBackground = {
        background: `-webkit-linear-gradient(left, #000 50%, #fff 50%)`,
        background: `-moz-linear-gradient(left, #000 50%, #fff 50%)`,
        background: `-ms-linear-gradient(left, #000 50%, #fff 50%)`,
        background: `linear-gradient(left, #000 50%, #fff 50%)`,
      }    

<div style={sizeBackground} >

Answer 1

你需要把所有在一个句子中作为background:的所有参数。 在您需要将样式添加到 DOM 之后，在本例中为 div。所以添加style={{background: _valueOfBackground_}}。利用这个 valueOfBackground 可以是一个变量，你可以把sizeBackground;

  const sizeBackground =
     `-webkit-linear-gradient(left, #000 50%, #fff 50%)
     -moz-linear-gradient(left, #000 50%, #fff 50%)
     -ms-linear-gradient(left, #000 50%, #fff 50%)
     linear-gradient(left, #000 50%, #fff 50%)`    

<div style={{background:sizeBackground}}>