Está funcionando ya que mi modalOverlay se monta y desmonta en función de los accesorios de estado. Muestra que recibe de los padres. pero las transiciones no están ocurriendo. Quiero que modalOverlay tenga una opacidad de 0 a 0.9 y también algo de transición. Verifiqué en el elemento de inspección las clases como my-node-enter my-node-enter-active y otras se agregan. entonces, ¿por qué no obtengo la opacidad reducida y las transiciones? Por favor ayuda

 const ModalOverlay=(props)=>{ const clickHandler=()=>{ props.closeModal(); } return( <> <CSSTransition mountOnEnter unmountOnExit in={props.show} timeout={200} classNames="my-node"> <div className={classes.modalOverlay}> <div className={classes.closeModal}> <div className={classes.closeButton} onClick={clickHandler}> </div> </div> <div className={classes.options}></div> <div className={classes.contactUs}></div> </div> </CSSTransition> </> ) } export default ModalOverlay

Aquí está el css

 .modalOverlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: auto; background: rgb(0, 0, 0); /* Just to visualize the extent */ /* opacity: 0.9; */ height: 100vh; display: flex; flex-direction: column; } .closeModal{ background-color: aqua; width: 100%; height: 10%; } .options{ background-color: bisque; width: 100%; height: 60%; } .contactUs{ background-color: rgb(255, 66, 66); width: 100%; height: 30%; } .closeButton{ margin-right: 15px; } .fade-in-enter{ opacity: 0; } .fade-in-enter-active{ opacity: 1; transition: opacity 200ms; } .fade-in-exit{ opacity: 1; } .fade-in-exit-active{ opacity: 0; transition: opacity 200ms; } .my-node-enter { opacity: 0; } .my-node-enter-active { opacity: 1; transition: opacity 200ms; } .my-node-exit { opacity: 1; } .my-node-exit-active { opacity: 0; transition: opacity 200ms; }