勾选复选框时更改表格背景颜色

Question

I have this 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)}/>
                &nbsp;&nbsp; Agree and access
              </label>
          </table>
      </div>   

This is the CSS I'm using:

.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;
}

I'd like the entire table background to also turn #4f9f31 when the checkbox is ticked. How is this done?

I tried the solution in Property 'value' does not exist on type 'Readonly<{}>' but caused this error in my browser:

Property 'backgroundColor' does not exist on type 'Readonly<{}>'

I added a State interface to resolve the error but then got TypeError: Cannot read properties of null (reading 'backgroundColor') . I seem to be missing something though. How to dynamically add a class to manual class names? but it give me

Answer 1

<table className={`checkbox-table ${this.state.backgroundColor}`}>

Your fuction onClickOfAgreement(pol) can set the state backgroundColor to 'checked', then on CSS:

.checked {
  background-color: #4f9f31;
}