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

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 因为它也支持颜色。

此外仅传递标准渐变，不带浏览器特定前缀（参见）。请注意，目前所有主要浏览器都支持 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

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

React - How to apply gradient with browsers-prefixs on a props value?

css

components

gradient

linear-gradients

reactjs