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

【问题标题】：React - How to apply gradient with browsers-prefixs on a props value?React - 如何在道具值上应用带有浏览器前缀的渐变？
【发布时间】：2020-04-07 20:04:00
【问题描述】：

我得到了以下组件：

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>

我能做什么？

【问题讨论】：

标签： css reactjs components gradient linear-gradients

【解决方案1】：

使用背景色代替背景色

    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

【讨论】：

【解决方案2】：

将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>

【讨论】：