reactjs材質uiGRID布局如何使用-有解無憂

我正在嘗試將@mui/material/Grid布局用于一個用例，
在我的報告組件中，我希望將條形圖和折線圖放在一個塊
中，將圓環圖和 PolarArea 圖表放在另一個塊中，

我嘗試通過添加來應用 CSS style = {{display: "inline-block"}}，
但是 UX 看起來像這樣 -
reactjs材質ui GRID布局如何使用

通過代碼在高層次上是這樣的 -
App.js -

function App() {
return (
    <Router>
      <Container style={{backgroundColor: '#F3F4F6'}}>
        <Grid container spacing={0.5} >
          <Grid item xs={12}>
            <Routes>
              <Route path='/' element={<SignIn />}/>
              <Route path='/dashboard' element={<Dashboard/>}/>
            </Routes>
          </Grid>
        </Grid>
      </Container>
    </Router>
  );
}

Dashboard.js 組件 -

const Dashboard = () => {
    return (<>
        <Grid item xs={12}>
            <Table/>
        </Grid>
        <Grid item xs={12}>
            <Report/>
        </Grid>
    </>
)}

Report.js 組件 -

export function Report() {
    return <>
    <Grid item xs={6}>
      <Bar options={barChartOptions} data={barChartData} style={{backgroundColor: 'white'}}/>
    </Grid>
    <Grid item xs={6}>
      <Line options={areaChartOptions} data={areaChartData} style={{backgroundColor: 'white'}}/>
    </Grid>
    <Grid item xs={6}>
      <Doughnut options={doughnutOptions} data={doughnutChatData} style={{backgroundColor: 'white'}}/>
    </Grid>
    <Grid item xs={6}>
      <PolarArea options={polarAreaOptions} data={polarAreaData} style={{backgroundColor: 'white'}}/>
    </Grid>
    <Grid item xs={12}>
      <Bar options={groupedBarOptions} data={groupedBarData} style={{backgroundColor: 'white'}}/>
    </Grid>
  </>
}

uj5u.com熱心網友回復：

您應該使用 Grid 容器包裝 Grid 專案。

export function Report() {
    return <>
    <Grid container>
       <Grid item xs={6}>
         <Bar options={barChartOptions} data={barChartData} style={{backgroundColor: 'white'}}/>
      </Grid>
      <Grid item xs={6}>
         <Line options={areaChartOptions} data={areaChartData} style={{backgroundColor: 'white'}}/>
      </Grid>
    </Grid>
    <Grid container>
      <Grid item xs={6}>
        <Doughnut options={doughnutOptions} data={doughnutChatData} style={{backgroundColor: 'white'}}/>
      </Grid>
      <Grid item xs={6}>
         <PolarArea options={polarAreaOptions} data={polarAreaData} style={{backgroundColor: 'white'}}/>
      </Grid>
    </Grid>
    <Grid item xs={12}>
      <Bar options={groupedBarOptions} data={groupedBarData} style={{backgroundColor: 'white'}}/>
    </Grid>
  </>
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521760.html

標籤：javascript反应材料-ui

上一篇：函式引數的可選鏈接

下一篇：是否有一個String#indexOf等價物來計算代碼點（不是代碼單元）？