如何在另一個元素 REACT 上更改元素 onClick 的樣式？

Question

我想在單擊標准基本時更改 .page-header。 我試圖這樣做：

#standard-basic:focus ~ .page-header{
  display: none;
}

但它幫不了我。 如何在反應中或僅在 js 中更改頁眉的樣式？ 我使用功能組件

 <span id="pageHeader" className="page-header">TechPrice</span>
  <form
    className={props.classes.root}
    noValidate
    autoComplete="off"
    className="search-form"
  >
    <TextField className="textField" id="standard-basic" label="Поиск" />
    <SearchIcon className="search-icon" />
  </form>

Answer 1

我認為您需要使用樣式對象並將顯示道具設置為無取決於某些狀態

例子：

<span id="pageHeader" style={{"display": `isVisible ? "block" : "none"`}}>TechPrice</span>

Answer 2

CSS/CSS3沒有父選擇器。

請閱讀此主題： 是否有 CSS 父選擇器？

為了實現你的目標，你必須使用JavaScript/React/any other framework/library