React-如何在props值上应用带有浏览器前缀的渐变？

Question

我有以下组件：

const FeedCardButton = props => {
  return(
    <button 
        type="button"
        style={{backgroundColor: props.color, 
            filter: props.filter}} 
        className="feed-card-button">{props.title}</button>
  );
}

现在，我想为组件添加渐变作为背景，但是这种方式无法正常工作：

 <FeedCardButton 
    title="heyhey" 
    color="-moz-linear-gradient(top,  #34ac1a 0%, #84cd89 100%), -webkit-linear-gradient(top, #34ac1a 0%, #84cd89 100%),linear-gradient(to bottom,  #34ac1a 0%,#84cd89 100%)"
    filter="progid:DXImageTransform.Microsoft.gradient( startColorstr='#34ac1a', endColorstr='#84cd89',GradientType=0 );"></FeedCardButton>

我该怎么办？

Answer 1

将backgroundColor更改为background或backgroundImage，因为渐变是背景图像。我更喜欢background，因为它也支持颜色。

此外，仅传递标准梯度，而没有浏览器特定的前缀（请参见此answer）。请注意，所有主要浏览器当前都支持linear-gradient。

const FeedCardButton = props => (
  <button 
      type="button"
      style={{background: props.color, filter: props.filter}}
      className="feed-card-button">{props.title}</button>
);

ReactDOM.render(
   <FeedCardButton 
      title="heyhey" 
      color="linear-gradient(to bottom, #34ac1a 0%,#84cd89 100%)"
      filter="progid:DXImageTransform.Microsoft.gradient( startColorstr='#34ac1a', endColorstr='#84cd89',GradientType=0 );"></FeedCardButton>,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

使用背景色代替backgroundColor

    const FeedCardButton = props => {
      return (
        <button
          type="button"
          style={{
            background: props.color,
            height: props.hii,
            filter: props.filter
          }}
          className="feed-card-button"
        >
          {props.title}
        </button>
      );
    };

ReactDOM.render(
   <FeedCardButton 
      title="heyhey" 
      height="50px"
        color="linear-gradient(to right, #134e5e, #71b280)"
      filter="progid:DXImageTransform.Microsoft.gradient( startColorstr='#34ac1a', endColorstr='#84cd89',GradientType=0 );"></FeedCardButton>,
  root
);

演示代码：https://codesandbox.io/s/peaceful-northcutt-u4b52

有关梯度的帮助，请检查：https://uigradients.com/#Kashmir