Question

我在react中有一个组件，我想为其分配一个渐变背景。如您所知，要使渐变功能适用于跨浏览器，我们需要设置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;

div中的变量gradinet

0 个答案: