Встроенный стиль в фоне реакции: линейный градиент

Вы неправильно написали transparent на Transparente. Это работает: linear-gradient(to bottom, transparent 0%,transparent 50%,red 50%,red 100%)

Я считаю, что для градиентного фона вы должны использовать свойство background-image. Это должно выглядеть примерно так. У вас также есть опечатка с прозрачным.

 <div className = "card" style = "background-image:linear-gradient(to bottom, Transparent 0%,Transparent 50%,red 50%,red 100%)"></div>

Я не думаю, что вы правильно написали свой код. Смотрите примеры этого сайта Примеры

<div className = "card" style = {{background: "linear-gradient(#e66465, #9198e5);" }}>sada</div>

используйте этот код:

backgroundImage: "linear-gradient(to right, #4880EC, #019CAD)"

Возможно, я немного опоздал, но я нашел решение, что я сделал, я добавляю его на страницу css, затем проверяю элемент. Например: для * background: linear-gradient (вправо, # 000 0%, # 000 50%, #fff 50%, #fff 100%) *; если вы проверите его с помощью элемента inspect, вы найдете: -webkit-gradient (линейный, слева вверху, справа вверху, от (# 000), остановка цвета (50%, # 000), остановка цвета (50%, #fff)). Так что просто добавьте эту последнюю строку во встроенный стиль вашего компонента реакции:

<div className = "card" style = {{background:"-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff))"}}/>

в моем примере я использовал этот выше вместо:

<div className = "card" style = {{background: linear-gradient(to right, #000 0%,  #000 50%, #fff 50% #fff 100%)"}}/>

Итак, в заключение, добавьте это в файл css, он будет работать, увидеть результат в «элементе проверки», использовать его и отредактировать, как вам нравится, во встроенном стиле вашего компонента react js.

Please use Below code for adding the gradient and change the value (for Safari and Chrome)

-webkit-gradient: (linear, left top, right top, from(rgba(0,0,0,0.5)), color-stop(50%, rgba(0,0,0,0.2)));

Если вы пытаетесь сделать это встроенным, это сработало для меня.

<Button style = {{ backgroundImage: 'linear-gradient(#f67a36,#ed008c)' }}/>

Используется так с переменными

const color1 = "#343336";
const color2 = "#B408A4";
style = {{background: `linear-gradient(to bottom,  ${color1} 0%,${color2} 100%)`}}

У меня было что-то вроде:

<div style = {{background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic});`}}/>

Это не работало из-за ; в конце linear-gradient. Я удалил его, и все заработало.

Итак, я наткнулся на ваш пост, потому что столкнулся с той же проблемой, но нашел решение.

<button style = {{ backgroundImage: `linear-gradient(to right, rgba(0, 224, 255, 1), rgba(0, 133, 255, 1))`, }} >

Обратите внимание, что я использовал «вместо», который решил проблему, и я не знаю почему.

for react version 17.0.2, i used bacgroundImage property to style div background as follows:

   <div
    style = {{
      backgroundImage: "linear-gradient(yellow,lightgreen)",
      color: "darkred",
    }}
  >
    Inline style in react background: linear-gradient
  </div>