Reactjs 如何从组件树下的组件向主组件添加其他样式？

在我的React应用程序中，我有一个弹出窗口。当它出现时，我想将一个活动样式传递给我的主要组件，以使背景模糊（例如）。如何将“活动”样式从组件树下的元素传递到主元素？显然，我不能获取elementbyid（'main'），然后将我的类添加到类列表中，但这是我必须做的事情。我怎样才能在反应中做到这一点

 MainComponent.jsx
  <div className="main">
  </div>

 ComponentDownTheTree.jsx
  [popup, showPopup] = useState(false);
  <div onClick={() => showPopup(true)}
  </div>

MainComponent.jsx
ComponentDownTheTree.jsx
[popup，showPopup]=useState（false）；
showPopup（真）}

---

我需要在单击div时将“active”类添加到“main”中。

您考虑过使用react redux吗？这种方法大大简化了组件之间的通信。第一次理解它需要一段时间，但之后你会从中受益匪浅！