fix Grid system props in docs/src/components

Author: siriwatknp

docs/src/components/about/Team.tsx

@@ -394,7 +394,7 @@ export default function Team() {
             Special members of the community deserve a shout-out for their ever-lasting impact on
             MUI's open-source projects.
           </Typography>
-          <Grid container spacing={2} mt={2}>
+          <Grid container spacing={2} sx={{ mt: 2 }}>
             {contributors.map((profile) => (
               <Grid key={profile.name} size={{ xs: 12, sm: 6, md: 3 }}>
                 <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
@@ -413,7 +413,7 @@ export default function Team() {
             We honor some no-longer-active core team members who have made valuable contributions in
             the past. They advise us from time to time.
           </Typography>
-          <Grid container spacing={2} mt={2}>
+          <Grid container spacing={2} sx={{ mt: 2 }}>
             {emeriti.map((profile) => (
               <Grid key={profile.name} size={{ xs: 12, sm: 6, md: 3 }}>
                 <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />

docs/src/components/careers/PerksBenefits.tsx

@@ -104,7 +104,7 @@ function RemoteAwardCard() {
 export default function PerksBenefits() {
   return (
     <Section bg="gradient" cozy>
-      <Grid container spacing={5} alignItems="center">
+      <Grid container spacing={5} sx={{ alignItems: 'center' }}>
         <Grid size={{ md: 6 }}>
           <SectionHeadline
             overline="Working at MUI"

docs/src/components/productDesignKit/DesignKitDemo.tsx

@@ -187,7 +187,7 @@ export default function DesignKitsDemo() {
   };
   return (
     <Section bg="gradient" cozy>
-      <Grid container spacing={2} alignItems="center">
+      <Grid container spacing={2} sx={{ alignItems: 'center' }}>
         <Grid sx={{ minWidth: 0 }} size={{ md: 6 }}>
           <SectionHeadline
             overline="Design Kits"

docs/src/components/productDesignKit/DesignKitValues.tsx

@@ -41,7 +41,7 @@ export default function DesignKitValues() {
           </Typography>
         }
       />
-      <Grid container spacing={3} mt={4}>
+      <Grid container spacing={3} sx={{ mt: 4 }}>
         {content.map(({ icon, title, description }) => (
           <Grid key={title} size={{ xs: 12, sm: 6, md: 4 }}>
             <InfoCard title={title} icon={icon} description={description} />

docs/src/components/productMaterial/MaterialDesignKits.tsx

@@ -42,7 +42,7 @@ export default function MaterialDesignKits({ gradient }: MaterialDesignKitsProps
 
   return (
     <Section cozy bg={gradient ? 'gradient' : 'white'}>
-      <Grid container spacing={2} alignItems="center">
+      <Grid container spacing={2} sx={{ alignItems: 'center' }}>
         <Grid sx={{ minWidth: 0 }} size={{ md: 6 }}>
           <SectionHeadline
             overline="Design resources"

docs/src/components/productMaterial/MaterialEnd.tsx

@@ -57,7 +57,7 @@ export default function MaterialEnd({ noFaq }: MaterialEndProps) {
           />
         </Box>
       ) : (
-        <Grid container spacing={{ xs: 6, sm: 10 }} alignItems="center">
+        <Grid container spacing={{ xs: 6, sm: 10 }} sx={{ alignItems: 'center' }}>
           <Grid size={{ xs: 12, sm: 6 }}>
             <SectionHeadline
               overline="Community"

docs/src/components/productTemplate/TemplateDemo.tsx

@@ -58,7 +58,7 @@ export default function TemplateDemo() {
 
   return (
     <Section bg="gradient">
-      <Grid container spacing={2} alignItems="center">
+      <Grid container spacing={2} sx={{ alignItems: 'center' }}>
         <Grid sx={{ minWidth: 0 }} size={{ md: 6 }}>
           <SectionHeadline
             overline="Templates"

docs/src/components/productX/XPlans.tsx

@@ -36,7 +36,7 @@ const content = [
 export default function XPlans2() {
   return (
     <Section cozy>
-      <Grid container spacing={2} alignItems="center">
+      <Grid container spacing={2} sx={{ alignItems: 'center' }}>
         <Grid size={{ md: 6 }}>
           <SectionHeadline
             overline="Plans"

docs/src/components/productX/XRoadmap.tsx

@@ -99,7 +99,7 @@ export default function XRoadmap() {
         }`,
       }}
     >
-      <Grid container spacing={2} alignItems="center" justifyContent="space-between">
+      <Grid container spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
         <Grid size={{ xs: 12, md: 5 }}>
           <SectionHeadline
             overline="Roadmap"