diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81c1eab82ddcba..a6c294ccc23421 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -319,6 +319,13 @@ Big thanks to the 17 contributors who made this release possible. Here are some
   +<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />
   ```
 
+  ```diff
+  -<Hidden implementation="css" mdDown><Paper /></Hidden>
+  -<Hidden implementation="css" mdDown><button /></Hidden>
+  +<Paper sx={{ display: { xs: 'none', md: 'block' } }} />
+  +<Box component="button" sx={{ display: { xs: 'none', md: 'block' } }} />
+  ```
+
   Use the `useMediaQuery` hook to replace `implementation="js"`:
 
   ```diff
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index c6bd070d2be0ec..3f3821fdddc223 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -894,6 +894,13 @@ As the core components use emotion as a styled engine, the props used by emotion
   +<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />
   ```
 
+  ```diff
+  -<Hidden implementation="css" mdDown><Paper /></Hidden>
+  -<Hidden implementation="css" mdDown><button /></Hidden>
+  +<Paper sx={{ display: { xs: 'none', md: 'block' } }} />
+  +<Box component="button" sx={{ display: { xs: 'none', md: 'block' } }} />
+  ```
+
   Use the `useMediaQuery` hook to replace `implementation="js"`:
 
   ```diff