Concatenating props within Inline CSS (React)

2
votes

I'm currently trying to use props within my inline CSS. I'm curious to know why can't I concatenate this.props.color when using linear-gradient on the background-image property. Is there possibly another way I could go about achieving this or am I missing something?

render() { 
    let background = {
        width: "100%",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
        backgroundImage: "linear-gradient(to right," + this.props.color + "0%, #0072ff 100%)"
    };
    return (
        <div style={background}></div>
      );
}

Component in use:

     <Background color='red'/>
1
cssreactjsjsx
what is red0% supposed to mean? – azium
Oh my God...the space. Thank you! – Roddy2Hotty
do yourself a favor, use template strings – azium

1 Answers

0
votes

You need a space before 0%

Do like the following:

render() { 
    let background = {
        width: "100%",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
        backgroundImage: `linear-gradient(to right,${this.props.color} 0%, #0072ff 100%)`
    };
    return (
        <div style={background}></div>
      );
}