javascript - 如何从其他类（即 NavBar 组件）操作 index.tsx（最父级）中的变量？

Question

我目前有我的 index.tsx 如下

const dark = createMuiTheme({
  palette: {
    type: 'dark',
  }
})

const light = createMuiTheme({
  palette: {
    type: 'light',
  }
})

const toggle:boolean = false;

ReactDOM.render(
  <MuiThemeProvider theme={toggle?dark:light}>
    <CssBaseline />
    <App />
  </MuiThemeProvider>,
  document.getElementById('root') as HTMLElement
);

我最近对其进行了更改，因此我可以实现暗模式切换，这发生在 MuiThemeProvider。

问题是我不确定如何在 index.tsx （大多数父文件）中操作布尔（切换）变量，其中我的所有逻辑/代码都在 App.tsx 中，尤其是在 NavBar.tsx 上，它是 App 内部的一个组件.tsx 有一个按钮来触发夜间模式。

我最近才使用 React，所以我知道我将不得不使用道具以某种方式将价值提升到父级......但这实际上是如何发生的，这是唯一正确的方法吗？

TLDR；鉴于以下架构，我将如何从 NavBar 操作索引处的变量？此外，似乎 index.tsx 与其他的有点不同，因为其中没有类。如果是这样，跟踪变量的最佳方法是什么？我可以像其他所有组件一样添加状态吗？首页 > 应用 > 导航栏