Tengo un componente de nav como se muestra a continuación con cuatro accesorios que son todos booleanos que se usan para controlar el estilo de la interfaz de usuario

 const Nav = ({ isNav, isVisibleTwo, isVisibleThree, isVisibleFour }) => { return ( <nav className={isNav ? 'bubbs bubbs-enter' : 'bubbs'}> <GiHamburgerMenu /> <a href="#projects-title"> <div className={isVisibleFour ? 'bubble bubble-active' : 'bubble'}> <p>{`//`} P</p> </div> </a> <a href="#resume-title"> <div className={isVisibleTwo ? 'bubble bubble-active' : 'bubble'}> <p>{`//`} R</p> </div> </a> <a href="#contact-me"> <div className={isVisibleThree ? 'bubble bubble-active' : 'bubble'}> <p>{`//`} C</p> </div> </a> </nav> ) }

isNav controla si la nav es visible o no alternando las clases que controlan la opacidad.

bubbs-enter establece la opacity: 0.7

el problema que tengo es que si se aplica la clase bubble-active , quiero que la opacidad de la burbuja se establezca en 1. Lo cual no funciona actualmente porque la opacidad de nav está establecida en .7

¿Hay un trabajo válido para esto?

CSS

 nav { width: 6rem; position: sticky; top: 0; align-self: flex-end; z-index: 5; height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 3.2rem; /* padding-top: 3rem; */ } .bubbs { opacity: 0; transition: opacity 400ms ease-in; } .bubbs > svg { color: white; font-size: 1.8rem; margin-bottom: .5rem; } .bubbs-enter { opacity: .7; } .bubbs-enter:hover{ opacity: 1; border-left: 1px solid rgba(82, 82, 82, 0.246) } .bubble { aspect-ratio: 1; border: 1px solid rgba(74, 74, 74, 0.216); width: 3.6rem; border-radius: 50%; display: grid; place-items: center; margin: .5rem 0; backdrop-filter: blur(2px); cursor: pointer; background-color: rgba(28, 28, 28, 0.349); transition: all ease 350ms; } .bubble:hover { transform: scale(1.06); } .bubble p { color: rgb(240, 240, 240); margin: 0; font-size: 1.3rem; text-transform: capitalize; transition: all ease 550ms; } .bubble-active { background-color: rgb(255, 255, 255); transform: scale(1.06); } .bubble-active > p { color: red; }