Issue
I have a class based component and this.props.opacity
which define the opacity of a background and I have a class with the background with an opacity of 0 by default, I would like to change the opacity based on this.props.opacity
which returns a number
For example:
this.props.opacity // is at 0 but it also changes when I'm on the page
<div className={backgroundRed ? "background" : ""}> // is the JSX
The CSS:
.background {
background: red;
opacity: 1; // How do I make this value change based on this.props.opacity
}
FYI this.props.opacity
has values from 0 to 1 and it looks like this: 0.073892020
How can I dynamically change that by accessing the opacity value of my CSS class?
Solution
Directly you can pass to html tag as an object style like this
<div className="background"
style={{ opacity: this.props.opacity }}
/>
Answered By - akhtarvahid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.