I want to make an SVG change color to white when clicked and its container (icon_container) to change to blue. How can I achieve this? Below is the code snippet:
state = {
active: false,
};
click = () => {
this.setState({active: !this.state.active});
};
render = () => {
const classes = ['icon_container'];
if (this.state.active) {
classes.push('active');
}
return (
<div className={classes.join(' ')}>
<SvgLayer className="icon" onClick={this.click}/>
</div>
);
};
icons {
margin-top: 16px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
right: 16px;
.icon_container {
background-color: white;
.icon {
height: 16px;
width: 16px;
* {
fill: blue;
}
}
}
}
I have attempted the following code to change the SVG color to white and the icon_container to blue, but it doesn't work.
.active.icons.icon_container {
background-color: blue;
}
Can someone assist me with this issue? Thank you.