не могу удалить непрозрачность из div, который я хочу исключить, используя ReactJS

Question

Я пытаюсь сделать так, чтобы при нажатии на button он закрывал весь экран до 0.7, за исключением одного div (на самом деле ReactJS Component). То, как я это делаю, - когда происходит щелчок, он добавляет class к div, который окружает мой веб-сайт, и изменяет его opacity на 0.5. и я попытался переопределить спецификацию c Component, которую я хочу, с непрозрачностью 1, даже использовал :not(x), но ничего не получалось. Я добавляю класс, используя:

document.getElementById('centeredRowForPagination').setAttribute('class', 'centeredRowForPaginationDisabled')

, это фактически захватывает div.

, когда я пытался сделать то же самое, но с удалением класса он сказал, что Component равен нулю. но это не так (думая, что это потому, что он захватывает HTML components, насколько я знаю).

код:

    onBuyClicked = (e) => {
    document.getElementById('centeredRowForPagination').setAttribute('class', 'centeredRowForPaginationDisabled')
    }

 render() {
        return (
           <div id="centeredRowForPagination">
                <div>
                    <Row id="RowIdForCentering">
                        {renderCards}
                        {this.state.willDisplayBuyComponent && <div id="divForBuyingCompnent"><BuyComponent id="buyingComponent" /></div>}

                    </Row>  
                </div>
                <div id="centeredRowForPagination">
                    <Row>
                            <Pagination id="page-numbers">
                                    {renderPageNumbers}
                            </Pagination>
                    </Row> 
                </div>

            </div>

    )
}

css для компонента отца:

.centeredRowForPaginationDisabled:not(#divForBuyingCompnent){
pointer-events:none;//page disabled
width:100%;
height:100%;
opacity: 0.7;
  }

css для BuyComponent:

#buyComponentTesting{
  position:fixed;
  width:500px;
  height:500px;
  top:calc(40% - 200px);
  left:calc(45% - 138px);
  background:red;   
  pointer-events:all; /*but the div is accessible*/
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid black;
  border-radius: 50px !important;   
  opacity: 1 !important;
}