dewtt

mui · Jun 3, 2024 · a492fce · a492fce
1 parent 3319f7e
commit a492fce
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/docs/data/toolpad/core/introduction/Tutorial1.js b/docs/data/toolpad/core/introduction/Tutorial1.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
  async getMany() {
@@ -22,8 +22,8 @@ const npmData = createDataProvider({
 
 export default function Tutorial1() {
  return (
- <Box sx={{ width: '100%' }}>
+ <Stack sx={{ width: '100%' }} spacing={2}>
  <DataGrid height={300} dataProvider={npmData} />
- </Box>
+ </Stack>
  );
 }
diff --git a/docs/data/toolpad/core/introduction/Tutorial1.tsx b/docs/data/toolpad/core/introduction/Tutorial1.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
  async getMany() {
@@ -22,8 +22,8 @@ const npmData = createDataProvider({
 
 export default function Tutorial1() {
  return (
- <Box sx={{ width: '100%' }}>
+ <Stack sx={{ width: '100%' }} spacing={2}>
  <DataGrid height={300} dataProvider={npmData} />
- </Box>
+ </Stack>
  );
 }
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.js b/docs/data/toolpad/core/introduction/Tutorial2.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
 import { LineChart } from '@toolpad/core/LineChart';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
  async getMany() {
@@ -23,14 +23,14 @@ const npmData = createDataProvider({
 
 export default function Tutorial2() {
  return (
- <Box sx={{ width: '100%' }}>
+ <Stack sx={{ width: '100%' }} spacing={2}>
  <DataGrid height={300} dataProvider={npmData} />
  <LineChart
  height={300}
  dataProvider={npmData}
  xAxis={[{ dataKey: 'day' }]}
  series={[{ dataKey: 'downloads' }]}
  />
- </Box>
+ </Stack>
  );
 }
diff --git a/docs/data/toolpad/core/introduction/Tutorial2.tsx b/docs/data/toolpad/core/introduction/Tutorial2.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { createDataProvider } from '@toolpad/core/DataProvider';
 import { DataGrid } from '@toolpad/core/DataGrid';
 import { LineChart } from '@toolpad/core/LineChart';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 
 const npmData = createDataProvider({
  async getMany() {
@@ -23,14 +23,14 @@ const npmData = createDataProvider({
 
 export default function Tutorial2() {
  return (
- <Box sx={{ width: '100%' }}>
+ <Stack sx={{ width: '100%' }} spacing={2}>
  <DataGrid height={300} dataProvider={npmData} />
  <LineChart
  height={300}
  dataProvider={npmData}
  xAxis={[{ dataKey: 'day' }]}
  series={[{ dataKey: 'downloads' }]}
  />
- </Box>
+ </Stack>
  );
 }
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
@@ -137,15 +137,15 @@ This data provider calls the npm API and returns the downloads collection. It de
 
 ```js
 import { DataGrid } from '@toolpad/core';
-import { Box } from '@mui/material';
+import { Stack } from '@mui/material';
 
 // ...
 
 export default function App() {
  return (
- <Box sx={{ width: '100%' }}>
+ <Stack sx={{ width: '100%' }} spacing={2}>
  <DataGrid height={300} dataProvider={npmData} />
- </Box>
+ </Stack>
  );
 }
 ```
@@ -168,15 +168,15 @@ import { DataGrid, LineChart } from '@toolpad/core';
 
 export default function App() {
  return (
- <Box sx={{ width: '100%' }}>
+ <Stack sx={{ width: '100%' }} spacing={2}>
  <DataGrid height={300} dataProvider={npmData} />
  <LineChart
  height={300}
  dataProvider={npmData}
  xAxis={[{ dataKey: 'day' }]}
  series={[{ dataKey: 'downloads' }]}
  />
- </Box>
+ </Stack>
  );
 }
 ```