How to pass React Props inside Css??

I want to change the css background-image url passing react props
3 Replies
Coder_Carl
Coder_Carl•3y ago
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
RavenX
RavenX•3y ago
Ooooh @Coder_Carl thx 😊
Coder_Carl
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
Want results from more Discord servers?
Add your server