Search code examples
imagereactjscssinline-styles

Tint images in ReactJS

So I have this React component where I pass the background image and the colour it should get as a tint via props. It looks like this: 

this.props.background = 'https://picsum.photos/650';
this.props.color = '#E74C3C';

<div style={{
                ...defaultStyle,
                background: 'url(' + this.props.background + '), linearGradient(' + this.props.color + ',' + this.props.color')'
            }}>

Problem is that it throws an error saying that it can't be compiled. Can you tell me how else I would apply the tint using css inline-styles?

Solution

  • You can specify the linearGradient using rgba() format, but it might be better to use an overlay container with the opacity set low, and pass the tint colour in using props. I've built a small example using overlay on CodeSandBox - View Sample