[material-ui][Skeleton] Document text border radius customization

docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.js

@@ -0,0 +1,17 @@
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+const variants = ['h1', 'h3', 'body1', 'caption'];
+
+export default function SkeletonTextWithCustomRadius() {
+  return (
+    <Stack spacing={1}>
+      {variants.map((variant) => (
+        <Typography component="div" key={variant} variant={variant}>
+          <Skeleton variant="text" sx={{ borderRadius: 1 }} />
+        </Typography>
+      ))}
+    </Stack>
+  );
+}

docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx

@@ -0,0 +1,22 @@
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+
+const variants = [
+  'h1',
+  'h3',
+  'body1',
+  'caption',
+] as readonly TypographyProps['variant'][];
+
+export default function SkeletonTextWithCustomRadius() {
+  return (
+    <Stack spacing={1}>
+      {variants.map((variant) => (
+        <Typography component="div" key={variant} variant={variant}>
+          <Skeleton variant="text" sx={{ borderRadius: 1 }} />
+        </Typography>
+      ))}
+    </Stack>
+  );
+}

docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx.preview

@@ -0,0 +1,5 @@
+{variants.map((variant) => (
+  <Typography component="div" key={variant} variant={variant}>
+    <Skeleton variant="text" sx={{ borderRadius: 1 }} />
+  </Typography>
+))}

docs/data/material/components/skeleton/skeleton.md

@@ -71,6 +71,12 @@ It works well when it comes to typography as its height is set using `em` units.
 
 {{"demo": "SkeletonTypography.js", "defaultCodeOpen": false}}
 
+To keep that typography sizing behavior while changing the shape, keep
+`variant="text"` and customize the border radius with the `sx` prop instead of
+switching to `rectangular` or `rounded`.
+
+{{"demo": "SkeletonTextWithCustomRadius.js", "defaultCodeOpen": false}}
+
 But when it comes to other components, you may not want to repeat the width and
 height. In these instances, you can pass `children` and it will
 infer its width and height from them.