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

Question

I got the following component:

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

Now I want to add a gradient as a background to my component, but it doesn't work this way:

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

What can I do?

score 0 · Accepted Answer · answered Dec 14 '19 at 19:16

Change backgroundColor to background or backgroundImage, since gradients are a background image. I would prefer background because it also supports color.

In addition pass only the standard gradient without the browser specific prefixes (see this answer). Note that linear-gradient is currently supported by all major browsers.

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>

score 0 · Answer 2 · answered Dec 14 '19 at 19:30

Use background color instead of 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
);

Demo Code: https://codesandbox.io/s/peaceful-northcutt-u4b52

For gradient help please check: https://uigradients.com/#Kashmir

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

2 Answers2