Merge pull request #10463 from smeng9/deprecate-mui-v6-system-props

[Doc] Deprecate mui v6 system props

Author: fzaninotto

docs/AppBar.md

@@ -118,6 +118,7 @@ export const MyAppBar = () => (
 
 If you omit `<TitlePortal>`, `<AppBar>` will no longer display the page title. This can be done on purpose, e.g. if you want to render something completely different in the AppBar, like a company logo and a search engine:
 
+{% raw %}
 ```jsx
 // in src/MyAppBar.js
 import { AppBar } from 'react-admin';
@@ -128,13 +129,14 @@ import { Logo } from './Logo';
 
 const MyAppBar = () => (
     <AppBar>
-        <Box component="span" flex={1} />
+        <Box component="span" sx={{ flex: 1 }} /> 
         <Logo />
-        <Box component="span" flex={1} />
+        <Box component="span" sx={{ flex: 1 }} />
         <Search />
     </AppBar>
 );
 ```
+{% endraw %}
 
 ## `color`
 
@@ -450,6 +452,7 @@ export const MyAppbar = () => (
 
 If react-admin's `<AppBar>` component doesn't meet your needs, you can build your own component using Material UI's `<AppBar>`. Here is an example:
 
+{% raw %}
 ```jsx
 // in src/MyAppBar.js
 import { AppBar, Toolbar, Box } from '@mui/material';
@@ -459,12 +462,13 @@ export const MyAppBar = () => (
     <AppBar position="static">
         <Toolbar>
             <TitlePortal />
-            <Box flex="1" />
+            <Box sx={{ flex: "1" }} />
             <RefreshIconButton />
         </Toolbar>
     </AppBar>
 );
 ```
+{% endraw %}
 
 Then, use your custom app bar in a custom `<Layout>` component:
 

docs/Architecture.md

@@ -345,13 +345,13 @@ const ContactShowContent = () => {
     const { record, isPending } = useShowContext<Contact>();
     if (isPending || !record) return null;
     return (
-        <Box mt={2} display="flex">
-            <Box flex="1">
+        <Box sx={{ mt: 2, display: "flex" }}>
+            <Box sx={{ flex: "1" }}>
                 <Card>
                     <CardContent>
-                        <Box display="flex">
+                        <Box sx={{ display: "flex" }}>
                             <Avatar />
-                            <Box ml={2} flex="1">
+                            <Box sx={{ ml: 2, flex: "1" }}>
                                 <Typography variant="h5">
                                     {record.first_name} {record.last_name}
                                 </Typography>

docs/BoxStackGrid.md

@@ -37,28 +37,6 @@ const MyComponent = () => (
 ```
 {% endraw %}
 
-`<Box>` supports all the CSS properties as props, so you can write the same component as follows:
-
-{% raw %}
-```jsx
-const MyComponent = () => (
-    <Box
-        width={300}
-        height={300}
-        bgcolor="primary.main"
-        sx={{
-          '&:hover': {
-            backgroundColor: 'primary.dark',
-            opacity: [0.9, 0.8, 0.7],
-          },
-        }}
-    >
-        // ...
-    </Box>
-);
-```
-{% endraw %}
-
 You can render any component with `<Box>`, not only a `<div>`. For instance, to render a `<span>` with custom styles:
 
 {% raw %}

docs/Breadcrumb.md

@@ -344,6 +344,7 @@ const MyBreadcrumb = () => (
 
 Here is another example, showing how to use a React component as label:
 
+{% raw %}
 ```jsx
 import { Breadcrumb } from '@react-admin/ra-navigation';
 import { Typography, Stack } from '@mui/material';
@@ -356,7 +357,11 @@ const IconAndLabel = ({
     label: string;
     icon: React.ReactNode;
 }) => (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Stack
+        direction="row"
+        spacing={1}
+        sx={{ alignItems: "center" }}
+    >
         {icon}
         <Typography variant="body2">{label}</Typography>
     </Stack>
@@ -388,6 +393,7 @@ const MyBreadcrumb = () => (
     </Breadcrumb>
 );
 ```
+{% endraw %}
 
 `<Breadcrumb>` contains shortcut components for defining several `<Breadcrumb.Item>` children in a row: `<Breadcrumb.ResourceItem>`and `<Breadcrumb.ResourceItems>`.
 
@@ -530,6 +536,7 @@ const MyBreadcrumbCustomHome = () => (
 
 Just like with `<Breadcrumb.Item>`, you can also use a React component as label:
 
+{% raw %}
 ```tsx
 import { Breadcrumb } from '@react-admin/ra-navigation';
 import { Box, Stack } from '@mui/material';
@@ -540,7 +547,11 @@ const MyBreadcrumbCustomHome = () => (
     <Breadcrumb>
         <Breadcrumb.DashboardItem
             label={
-                <Stack direction="row" alignItems="center" spacing={1}>
+                <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{ alignItems: "center" }}
+                >
                     <CabinIcon />
                     <Box sx={visuallyHidden}>Dashboard</Box>
                 </Stack>
@@ -552,6 +563,7 @@ const MyBreadcrumbCustomHome = () => (
     </Breadcrumb>
 );
 ```
+{% endraw %}
 
 **Tip:** It's a good practice to include a visually hidden placeholder ('Dashboard' in this example) for screen readers when using an icon as label.
 

docs/Configurable.md

@@ -60,17 +60,19 @@ const TextBlockEditor = () => {
 ```
 The inner component reads the preferences using the same `usePreference` hook:
 
+{% raw %}
 ```jsx
 const TextBlock = ({ title, content }) => {
     const [color] = usePreference('color', '#ffffff');
     return (
-        <Box bgcolor={color}>
+        <Box sx={{ bgcolor: color }}>
             <Typography variant="h6">{title}</Typography>
             <Typography>{content}</Typography>
         </Box>
     );
 };
 ```
+{% endraw %}
 
 Then, use the configurable component in your app:
 
@@ -226,31 +228,34 @@ import { Box } from '@mui/material';
 import { AppBar, Menu, Sidebar, Inspector } from 'react-admin';
 
 const MyLayout = ({ children, dashboard }) => (
-    <Box 
-        display="flex"
-        flexDirection="column"
-        zIndex={1}
-        minHeight="100vh"
-        backgroundColor="theme.palette.background.default"
-        position="relative"
+    <Box
+        sx={{
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 1,
+            minHeight: "100vh",
+            backgroundColor: "theme.palette.background.default",
+            position: "relative"
+        }}
     >
         <Box
-            display="flex"
-            flexDirection="column"
             overflowX="auto"
+            sx={{ display: "flex", flexDirection: "column" }}
         >
             <AppBar />
-            <Box display="flex" flexGrow={1}>
+            <Box sx={{ display: "flex", flexGrow: 1 }}>
                 <Sidebar>
                     <Menu hasDashboard={!!dashboard} />
                 </Sidebar>
                 <Box
-                    display="flex"
-                    flexDirection="column"
-                    flexGrow={2}
-                    p={3}
-                    marginTop="4em"
-                    paddingLeft={5}
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        flexGrow: 2,
+                        p: 3,
+                        marginTop: "4em",
+                        paddingLeft: 5
+                    }}
                 >
                     {children}
                 </Box>

docs/DatagridAG.md

@@ -1533,7 +1533,7 @@ const CreatePostDialog = () => {
         <Dialog open onClose={onCancel}>
             <form onSubmit={handleSubmit}>
                 <DialogContent>
-                    <Stack gap={4}>
+                    <Stack sx={{ gap: 4 }}>
                         <MUITextField
                             name="title"
                             value={title}

docs/FilterButton.md

@@ -19,6 +19,7 @@ It's an internal component that you should only need if you build a custom List
 
 `<FilterButton>` expects an array of filter inputs as `filters` prop:
 
+{% raw %}
 ```jsx
 import {
     CreateButton,
@@ -39,7 +40,7 @@ const postFilters = [
 ];
 
 const ListToolbar = () => (
-    <Stack direction="row" justifyContent="space-between">
+    <Stack direction="row" sx={{ justifyContent: "space-between" }}>
         <FilterForm filters={postFilters} />
         <div>
             <FilterButton filters={postFilters} />
@@ -60,14 +61,16 @@ const PostList = () => (
     </ListBase>
 )
 ```
+{% endraw %}
 
 ## `disableSaveQuery`
 
 By default, the filter button lets users save a group of filters for later reuse. You can set the `disableSaveQuery` prop in the filter button to disable this feature.
 
+{% raw %}
 ```jsx
 const ListToolbar = () => (
-    <Stack direction="row" justifyContent="space-between">
+    <Stack direction="row" sx={{ justifyContent: "space-between" }}>
         <FilterForm filters={postFilters} />
         <div>
             <FilterButton filters={postFilters} disableSaveQuery />
@@ -76,3 +79,4 @@ const ListToolbar = () => (
     </Stack>
 )
 ```
+{% endraw %}

docs/FilterForm.md

@@ -19,6 +19,7 @@ It's an internal component that you should only need if you build a custom List
 
 `<FilterForm>` expects an array of filter inputs as `filters` prop:
 
+{% raw %}
 ```jsx
 import {
     CreateButton,
@@ -39,7 +40,7 @@ const postFilters = [
 ];
 
 const ListToolbar = () => (
-    <Stack direction="row" justifyContent="space-between">
+    <Stack direction="row" sx={{ justifyContent: "space-between" }}>
         <FilterForm filters={postFilters} />
         <div>
             <FilterButton filters={postFilters} />
@@ -60,3 +61,4 @@ const PostList = () => (
     </ListBase>
 )
 ```
+{% endraw %}

docs/FilteringTutorial.md

@@ -521,8 +521,8 @@ import { FilterLiveForm, TextInput, NullableBooleanInput } from 'react-admin';
 
 const PostFilterForm = () => (
     <FilterLiveForm>
-        <Box display="flex" alignItems="flex-end" mb={1}>
-            <Box component="span" mr={2}>
+        <Box sx={{ display: "flex", alignItems: "flex-end", mb: 1 }}>
+            <Box component="span" sx={{ mr: 2 }}>
                 {/* Full-text search filter. We don't use <SearchFilter> to force a large form input */}
                 <TextInput
                     resettable
@@ -538,7 +538,7 @@ const PostFilterForm = () => (
                     }}
                 />
             </Box>
-            <Box component="span" mr={2}>
+            <Box component="span" sx={{ mr: 2 }}>
                 {/* Commentable filter */}
                 <NullableBooleanInput
                     helperText={false}
@@ -592,8 +592,8 @@ const PostFilterForm = () => {
     return (
         <FormProvider {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)}>
-                <Box display="flex" alignItems="flex-end" mb={1}>
-                    <Box component="span" mr={2}>
+                <Box sx={{ display: "flex", alignItems: "flex-end", mb: 1 }}>
+                    <Box component="span" sx={{ mr: 2 }}>
                         {/* Full-text search filter. We don't use <SearchFilter> to force a large form input */}
                         <TextInput
                             resettable
@@ -609,19 +609,19 @@ const PostFilterForm = () => {
                             }}
                         />
                     </Box>
-                    <Box component="span" mr={2}>
+                    <Box component="span" sx={{ mr: 2 }}>
                         {/* Commentable filter */}
                         <NullableBooleanInput
                             helperText={false}
                             source="commentable"
                         />
                     </Box>
-                    <Box component="span" mr={2} mb={1.5}>
+                    <Box component="span" sx={{ mr: 2, mb: 1.5 }}>
                         <Button variant="outlined" color="primary" type="submit">
                             Filter
                         </Button>
                     </Box>
-                    <Box component="span" mb={1.5}>
+                    <Box component="span" sx={{ mb: 1.5 }}>
                         <Button variant="outlined" onClick={resetFilter}>
                             Close
                         </Button>
@@ -639,12 +639,13 @@ const PostFilterForm = () => {
 
 To finish, create a `<ListAction>` component and pass it to the `<List>` component using the `actions` prop:
 
+{% raw %}
 ```jsx
 import { TopToolbar, ExportButton } from 'react-admin';
 import { Box } from '@mui/material';
 
 const ListActions = () => (
-    <Box width="100%">
+    <Box sx={{ width: "100%" }}>
         <TopToolbar>
             <PostFilterButton />
             <ExportButton />
@@ -659,6 +660,7 @@ export const PostList = () => (
     </List>
 );
 ```
+{% endraw %}
 
 **Tip**: No need to pass any `filters` to the list anymore, as the `<PostFilterForm>` component will display them.
 

docs/ImageField.md

@@ -93,7 +93,7 @@ For instance, to specify a size for the image:
 
 {% raw %}
 ```jsx
- <ImageField
+<ImageField
     source="thumbnail"
     sx={{ '& img': { maxWidth: 50, maxHeight: 50, objectFit: 'contain' } }}
 />