堆棧:流星+反應+材質UI

以下是我的“主”渲染器組件的完整代碼:

// Sorry for not giving material-UI CSS,
// cause it cannot be served as a stand-alone CSS

render() {
    return ( 
      <div className = "container">
        <AppBar title = "test" />
        <Tabs /> // Tab contents goes here
        <RefreshIndicator
          left={70} // Required properties
          top={0}  // Required properties
          status="loading"
          style={{ 
              display: 'inline-block',
              position: 'relative',
              margin: '0 auto' }} />
      </div>
   );
},

我想讓刷新指示器在我的標簽下方水平居中對齊，就像這張圖片中的旋轉圓圈一樣:

在這里的物料界面文檔中，該指標有以下幾種樣式:

display: 'inline-block',
position: 'relative',

有了這種樣式，我不能水平居中對齊，沒有這種樣式，我甚至不能把它放在我想要的位置。

我嘗試過的:

邊距:0 auto-& gt；不成功的 文本對齊:居中-& gt；不成功的 顯示:flex-& gt；不成功的 1 & amp2->；不成功的 left={$(窗口)。寬度/2-20 }-& gt；這工作，但我想只用CSS 下面的解決方案以進度指示器為中心，沒有任何導致元素偏移的雜亂計算:

<div style={{display: 'flex', justifyContent: 'center'}}>
   <RefreshIndicator status="loading" />
</div>

這是我如何確保它水平居中。對我很有用。

將父組件樣式設置為位置:“相對”。 將刷新指示器樣式設置為margin left:“50%”，left={-20}(假設大小為40)。 下面是代碼(我把它放在CardText組件中)。

...
    <CardText style={{position: 'relative'}}>
      <RefreshIndicator
        size={40}
        left={-20}
        top={10}
        status={'loading'}
        style={{marginLeft: '50%'}}
      />
    </CardText>
    ...

在物料UI v5中，有一個堆棧組件，它充當flexbox容器。默認情況下，方向為列，要將其水平居中，您可以將對齊項目設置為居中:

<Stack alignItems="center">
  <CircularProgress />
</Stack>

現場演示

在材料用戶界面和文本中循環處理頁面堆棧溢出

<div style={{ alignItems: "center", display: "flex", justifyContent: "center", height: "100vh", width: "100vw" }}>
                                <CircularProgress />
                                <span style={{ justifyContent: "center", position: "fixed", top: "55%" }}>Loading...please wait</span>
                            </div>[![enter image description here][1]][1]

背景組件將進度指示器放在中間，還可以在應用程序上添加一個暗層。該組件在MUI V5中可用。

<Backdrop open={enabled} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="secondary" /></Backdrop>