tengo este render:
render() { const {policy} = this.props; return ( <div className="my-content"> <table className="checkbox-table"> <label> <input className="checkbox-round" type="checkbox" onClick={this.onClickOfAgreement(pol)}/> Agree and access </label> </table> </div>Este es el CSS que estoy usando:
.my-content { position: relative; background-color: #fefefe; padding: 0; } .checkbox-table { margin: 10px; border-radius: 7px; width: auto; padding: 10px; } .checkbox-round { width: 1.3em; height: 1.3em; background-color: white; border-radius: 50%; vertical-align: middle; border: 1px solid grey; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; } .checkbox-round:checked { background-color: #4f9f31; border-color: #fefefe; border-width: 3px; } Me gustaría que todo el fondo de la tabla también cambie a #4f9f31 cuando la casilla de verificación esté marcada. ¿Cómo se hace esto?
Probé la solución en la propiedad 'valor' no existe en el tipo 'Readonly<{}>' pero provoqué este error en mi navegador:
La propiedad 'backgroundColor' no existe en el tipo 'Readonly<{}>'
Agregué una interfaz de estado para resolver el error, pero luego obtuve TypeError: Cannot read properties of null (reading 'backgroundColor') . Aunque parece que me falta algo. ¿Cómo agregar dinámicamente una clase a los nombres de clases manuales? pero me da
<table className={`checkbox-table ${this.state.addBackgroundColor}`}> Para que funcione, debe inicializar un estado llamado addBackgroundColor . Luego, su función onClickOfAgreement(pol) puede establecer el color de fondo del estado en 'marcado'. Luego, en CSS, crea una regla que agrega el color de fondo cuando se checked el estado:
.checked { background-color: #4f9f31; }