From 85bf8140f1e80303859bfaba1f9c0475e9816c49 Mon Sep 17 00:00:00 2001
From: Alan Mak <108719967+meaqua9420@users.noreply.github.com>
Date: Sun, 31 May 2026 16:34:58 +0800
Subject: [PATCH] [material-ui][Skeleton] Document text border radius
 customization

---
 .../skeleton/SkeletonTextWithCustomRadius.js  | 17 ++++++++++++++
 .../skeleton/SkeletonTextWithCustomRadius.tsx | 22 +++++++++++++++++++
 .../SkeletonTextWithCustomRadius.tsx.preview  |  5 +++++
 .../material/components/skeleton/skeleton.md  |  6 +++++
 4 files changed, 50 insertions(+)
 create mode 100644 docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.js
 create mode 100644 docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx
 create mode 100644 docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx.preview

diff --git a/docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.js b/docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.js
new file mode 100644
index 00000000000000..4ca5306b2dc086
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx b/docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx
new file mode 100644
index 00000000000000..c4c2abcf85fd0f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx.preview b/docs/data/material/components/skeleton/SkeletonTextWithCustomRadius.tsx.preview
new file mode 100644
index 00000000000000..aa568bdd4e12fe
--- /dev/null
+++ b/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>
+))}
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
index c5ba8a847ea1f1..40f382be25db8f 100644
--- a/docs/data/material/components/skeleton/skeleton.md
+++ b/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.