Реагировать - линейные префиксы линейного градиента вендора - PullRequest
Новая
       21

Реагировать - линейные префиксы линейного градиента вендора

0 голосов
/ 25 апреля 2019

Как я могу использовать префиксы поставщиков линейного градиента в реакции? Возможно ли это сделать без использования какого-либо внешнего пакета?

Это не работает, потому что объект не может иметь ключи с одинаковыми именами, поэтому стиль не применяется к 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} >

1 Ответ

0 голосов
/ 25 апреля 2019

вам нужно хранить все в одном предложении как все параметры background:.После того, как вам нужно добавить стиль в DOM, в этом случае div.так что добавьте style={{background: _valueOfBackground_}}.Преимущество этого значенияOfBackground может быть переменной, которую вы можете поместить 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}}>
...