How to pass React Props inside Css??

I want to change the css background-image url passing react props

3 Replies

inside of the component you can use inline styling, but this can be a bit messy and restrictive also. so you can either

export default function ComponentExample(props){

return (
<div
className="example"
style={{backgroundImage: `url${props.backgroundImageSrc}`;}}
>
<p>name: {props.name && props.name}</p>
<p>date: {props.date && props.date}</p>
</div>
)}

export default function ComponentExample(props){

return (
<div
className="example"
style={{backgroundImage: `url${props.backgroundImageSrc}`;}}
>
<p>name: {props.name && props.name}</p>
<p>date: {props.date && props.date}</p>
</div>
)}

or what I like to do is

export default function ComponentExample({name, date}, ...props){

return (
<div
className="example"
{...props}
>
<p>name: {name && name}</p>
<p>date: {date && date}</p>
</div>
)}

export default function ComponentExample({name, date}, ...props){

return (
<div
className="example"
{...props}
>
<p>name: {name && name}</p>
<p>date: {date && date}</p>
</div>
)}

the other alternative is to use some form of JS based CSS library such as styled components

RavenXOP•3y ago

Ooooh @Coder_Carl thx 😊

Coder_Carl•3y ago

np. the 2nd example allow you to pass standard html props through on the Component and it will be added to the div wrapper

Gaming

Programming

How to pass React Props inside Css??