reactjs - 使用 react-loading-overlay 的问题

Question

我有一个简单的反应应用程序，我试图添加一个简单的加载覆盖。我看到最常见的用法是 react-loading-overlay。

我的主要 app.js 结构看起来像这样，我有一个简单的菜单和一个 deck.gl 地图

      <div className="container">
          <AppMenu/>
          <div className="deckgl_map">
              <DeckMap/>
          </div>
      </div>

如果我理解正确，要使用加载覆盖，我需要做类似的事情（使用 true 进行测试）：

      <LoadingOverlay
       active={isActive}
       spinner
       text='Loading your content...'
       >
      <div className="container">
          <AppMenu/>
          <div className="deckgl_map">
              <DeckMap/>
          </div>
      </div>
      </LoadingOverlay>

但是一旦我这样做了，我的整个应用页面，而不是填满整个屏幕，只占据屏幕的前 20%（其余部分是空白的）。

为什么用 LoadOverlay 组件包装我的组件会导致整个页面看起来很奇怪？我需要为 LoadOverlay 组件“玩” CSS 吗？

标签： reactjsloadingoverlay