Skip to content

Commit a2528a5

Browse files
djhidjhi
authored
Merge pull request #10680 from smeng9/deprecate-system-props
Fix MUI7 compatibility
2 parents ffcdaac + 5a27f09 commit a2528a5

36 files changed

+508
-108
lines changed

‎examples/demo/src/dashboard/CardWithIcon.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,19 @@ const CardWithIcon = ({ icon, title, subtitle, to, children }: Props) => (
5151
},
5252
}}
5353
>
54-
<Box width="3em" className="icon">
54+
<Box
55+
className="icon"
56+
sx={{
57+
width: '3em',
58+
}}
59+
>
5560
{createElement(icon, { fontSize: 'large' })}
5661
</Box>
57-
<Box textAlign="right">
62+
<Box
63+
sx={{
64+
textAlign: 'right',
65+
}}
66+
>
5867
<Typography color="textSecondary">{title}</Typography>
5968
<Typography variant="h5" component="h2">
6069
{subtitle || ' '}

‎examples/demo/src/dashboard/NewCustomers.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,26 @@ const NewCustomers = () => {
5151
/>
5252
)}
5353
/>
54-
<Box flexGrow={1}>&nbsp;</Box>
54+
<Box
55+
sx={{
56+
flexGrow: 1,
57+
}}
58+
>
59+
&nbsp;
60+
</Box>
5561
<Button
5662
sx={{ borderRadius: 0 }}
5763
component={Link}
5864
to="/customers"
5965
size="small"
6066
color="primary"
6167
>
62-
<Box p={1} sx={{ color: 'primary.main' }}>
68+
<Box
69+
sx={{
70+
p: 1,
71+
color: 'primary.main',
72+
}}
73+
>
6374
{translate('pos.dashboard.all_customers')}
6475
</Box>
6576
</Button>

‎examples/demo/src/dashboard/PendingReviews.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,26 @@ const PendingReviews = () => {
105105
</ListItem>
106106
))}
107107
</List>
108-
<Box flexGrow={1}>&nbsp;</Box>
108+
<Box
109+
sx={{
110+
flexGrow: 1,
111+
}}
112+
>
113+
&nbsp;
114+
</Box>
109115
<Button
110116
sx={{ borderRadius: 0 }}
111117
component={Link}
112118
to="/reviews"
113119
size="small"
114120
color="primary"
115121
>
116-
<Box p={1} sx={{ color: 'primary.main' }}>
122+
<Box
123+
sx={{
124+
p: 1,
125+
color: 'primary.main',
126+
}}
127+
>
117128
{translate('pos.dashboard.all_reviews')}
118129
</Box>
119130
</Button>

‎examples/demo/src/dashboard/Welcome.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,24 @@ const Welcome = () => {
1919
marginBottom: '1em',
2020
}}
2121
>
22-
<Box display="flex">
23-
<Box flex="1">
22+
<Box
23+
sx={{
24+
display: 'flex',
25+
}}
26+
>
27+
<Box
28+
sx={{
29+
flex: '1',
30+
}}
31+
>
2432
<Typography variant="h5" component="h2" gutterBottom>
2533
{translate('pos.dashboard.welcome.title')}
2634
</Typography>
27-
<Box maxWidth="40em">
35+
<Box
36+
sx={{
37+
maxWidth: '40em',
38+
}}
39+
>
2840
<Typography variant="body1" component="p" gutterBottom>
2941
{translate('pos.dashboard.welcome.subtitle')}
3042
</Typography>
@@ -57,14 +69,14 @@ const Welcome = () => {
5769
</CardActions>
5870
</Box>
5971
<Box
60-
display={{ xs: 'none', sm: 'none', md: 'block' }}
6172
sx={{
73+
display: { xs: 'none', sm: 'none', md: 'block' },
74+
width: '16em',
75+
height: '9em',
76+
overflow: 'hidden',
6277
background: `url(${publishArticleImage}) top right / cover`,
6378
marginLeft: 'auto',
6479
}}
65-
width="16em"
66-
height="9em"
67-
overflow="hidden"
6880
/>
6981
</Box>
7082
</Card>

‎examples/demo/src/invoices/InvoiceShow.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ const InvoiceShow = () => {
2424
</Grid>
2525
</Grid>
2626
<Grid container spacing={2}>
27-
<Grid size={{ xs: 12 }} alignContent="flex-end">
27+
<Grid
28+
size={{ xs: 12 }}
29+
sx={{
30+
alignContent: 'flex-end',
31+
}}
32+
>
2833
<ReferenceField
2934
reference="customers"
3035
source="customer_id"
@@ -34,7 +39,13 @@ const InvoiceShow = () => {
3439
</ReferenceField>
3540
</Grid>
3641
</Grid>
37-
<Box height={20}>&nbsp;</Box>
42+
<Box
43+
sx={{
44+
height: 20,
45+
}}
46+
>
47+
&nbsp;
48+
</Box>
3849
<Grid container spacing={2}>
3950
<Grid size={{ xs: 6 }}>
4051
<Typography variant="h6" gutterBottom align="center">
@@ -63,7 +74,11 @@ const InvoiceShow = () => {
6374
</ReferenceField>
6475
</Grid>
6576
</Grid>
66-
<Box margin="10px 0">
77+
<Box
78+
sx={{
79+
margin: '10px 0',
80+
}}
81+
>
6782
<ReferenceField
6883
reference="orders"
6984
source="order_id"

‎examples/demo/src/layout/Login.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import { Login as RaLogin, LoginForm } from 'react-admin';
44

55
const Login = () => (
66
<RaLogin sx={{ background: 'none' }}>
7-
<Typography color="text.disabled" textAlign="center">
7+
<Typography
8+
sx={{
9+
color: 'text.disabled',
10+
textAlign: 'center',
11+
}}
12+
>
813
Hint: demo / demo
914
</Typography>
1015
<LoginForm />

‎examples/demo/src/orders/MobileGrid.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@ const MobileGrid = () => {
2222
return null;
2323
}
2424
return (
25-
<Box margin="0.5em">
25+
<Box
26+
sx={{
27+
margin: '0.5em',
28+
}}
29+
>
2630
{data.map(record => (
2731
<RecordContextProvider key={record.id} value={record}>
2832
<Card sx={{ margin: '0.5rem 0' }}>

‎examples/demo/src/orders/OrderEdit.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,25 @@ const CustomerAddress = () => {
6767
);
6868
};
6969

70-
const Spacer = () => <Box mb={1}>&nbsp;</Box>;
70+
const Spacer = () => (
71+
<Box
72+
sx={{
73+
mb: 1,
74+
}}
75+
>
76+
&nbsp;
77+
</Box>
78+
);
7179

7280
const OrderForm = () => {
7381
const translate = useTranslate();
7482
return (
7583
<Form>
76-
<Box maxWidth="50em">
84+
<Box
85+
sx={{
86+
maxWidth: '50em',
87+
}}
88+
>
7789
<PrevNextButtons
7890
filterDefaultValues={{ status: 'ordered' }}
7991
sort={{ field: 'date', order: 'DESC' }}
@@ -126,7 +138,11 @@ const OrderForm = () => {
126138
/>
127139
</Grid>
128140
<Grid size={{ xs: 12, sm: 12, md: 6 }}>
129-
<Box mt={2}>
141+
<Box
142+
sx={{
143+
mt: 2,
144+
}}
145+
>
130146
<BooleanInput
131147
row={true}
132148
source="returned"

‎examples/demo/src/products/GridList.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,12 @@ const LoadingGridList = () => {
3939
<ImageList rowHeight={180} cols={cols} sx={{ m: 0 }}>
4040
{times(perPage, key => (
4141
<ImageListItem key={key}>
42-
<Box bgcolor="grey.300" height="100%" />
42+
<Box
43+
sx={{
44+
bgcolor: 'grey.300',
45+
height: '100%',
46+
}}
47+
/>
4348
</ImageListItem>
4449
))}
4550
</ImageList>

‎examples/demo/src/products/ProductList.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,26 @@ const ProductList = () => {
3232
<FilterContext.Provider value={productFilters}>
3333
<ListActions isSmall={isSmall} />
3434
{isSmall && (
35-
<Box m={1}>
35+
<Box
36+
sx={{
37+
m: 1,
38+
}}
39+
>
3640
<FilterForm />
3741
</Box>
3842
)}
3943
</FilterContext.Provider>
40-
<Box display="flex">
44+
<Box
45+
sx={{
46+
display: 'flex',
47+
}}
48+
>
4149
<Aside />
42-
<Box width={isSmall ? 'auto' : 'calc(100% - 16em)'}>
50+
<Box
51+
sx={{
52+
width: isSmall ? 'auto' : 'calc(100% - 16em)',
53+
}}
54+
>
4355
<ImageList />
4456
<Pagination rowsPerPageOptions={[12, 24, 48, 72]} />
4557
</Box>

0 commit comments

Comments
 (0)