переменная градиента для div в реаги - PullRequest
Новая
       8

переменная градиента для div в реаги

0 голосов
/ 03 декабря 2018

У меня есть компонент в реагировании, и мне нравится назначать ему градиентный фон.Как вы знаете, чтобы градиент работал в кросс-браузерах, нам нужно установить 3 таких фона, например: 

background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%); 
background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%); 
background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%);

и, поскольку значения цвета передаются в качестве реквизитов в этот компонент, я устанавливаю объект стиля внутрикомпонент, подобный этому: 

  const style = {
      background: `${firstColor}`,
      background: `-moz-linear-gradient(left,  ${firstColor} 0%,  ${secondColor} 100%)`,
      background: `-webkit-linear-gradient(left,  ${firstColor} 0%, ${secondColor} 100%)`,
      background: `linear-gradient(to right,  ${firstColor} 0%, ${secondColor} 100%)`,
  };

, как вы заметили, свойства одинаковы, поэтому вставляется только последний фон.У вас есть идеи, как решить эту проблему?

Вот компонент 

const Card = props => {
  const { firstColor, secondColor } = props;
  const style = {
    background: `${firstColor}`,
    background: `-moz-linear-gradient(left,  ${firstColor} 0%,  ${secondColor} 100%)`,
    background: `-webkit-linear-gradient(left,  ${firstColor} 0%, ${secondColor} 100%)`,
    background: `linear-gradient(to right,  ${firstColor} 0%, ${secondColor} 100%)`
  };

  return (
    <div class="col s12 m4">
      <div class="card" style={style}>
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>
            I am a very simple card. I am good at containing small bits of
            information. I am convenient because I require little markup to use
            effectively.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Card;
...