diff --git a/.changeset/neat-lamps-press.md b/.changeset/neat-lamps-press.md
new file mode 100644
index 0000000000..0e3845db69
--- /dev/null
+++ b/.changeset/neat-lamps-press.md
@@ -0,0 +1,9 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-xcmetrics': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-catalog': patch
+---
+
+MUI v5 fix: express theme spacing without extra unit
diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
index 6b336f5489..9fc9eee959 100644
--- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
+++ b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -53,7 +54,7 @@ const useStyles = makeStyles<BackstageTheme>(
   theme => ({
     code: {
       borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
+      margin: theme.spacing(2, 0),
       background:
         theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
diff --git a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
index aacb44079a..d55c50bd29 100644
--- a/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
+++ b/packages/core-components/src/layout/ErrorPage/MicDrop.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles(
         maxWidth: '96%',
         bottom: 'unset',
         right: 'unset',
-        margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+        margin: theme.spacing(10, 'auto', 4),
       },
     },
   }),
diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx
index b76877d395..a193a90d05 100644
--- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx
+++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles<BackstageTheme>(
   theme => ({
     code: {
       borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
+      margin: theme.spacing(2, 0),
       background:
         theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx
index c1d502dc78..f55527c78a 100644
--- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx
+++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx
@@ -33,7 +33,7 @@ const useStyles = makeStyles<BackstageTheme>(
   theme => ({
     code: {
       borderRadius: 6,
-      margin: `${theme.spacing(2)}px 0px`,
+      margin: theme.spacing(2, 0),
       background:
         theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
diff --git a/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx
index a375eca02a..03b23ec6b0 100644
--- a/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx
+++ b/plugins/catalog/src/components/EntityNotFound/Illo/Illo.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
       position: 'relative',
       top: 'unset',
       right: 'unset',
-      margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+      margin: theme.spacing(10, 'auto', 4),
     },
   },
 }));
diff --git a/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx b/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx
index 9718aeacb7..7902453490 100644
--- a/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx
+++ b/plugins/splunk-on-call/src/components/Escalation/EscalationPolicy.tsx
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
     },
     progress: {
-      margin: `0 ${theme.spacing(2)}px`,
+      margin: theme.spacing(0, 2),
     },
   }),
 );
diff --git a/plugins/splunk-on-call/src/components/Incident/Incidents.tsx b/plugins/splunk-on-call/src/components/Incident/Incidents.tsx
index e2ec9609bd..6dcb4f9989 100644
--- a/plugins/splunk-on-call/src/components/Incident/Incidents.tsx
+++ b/plugins/splunk-on-call/src/components/Incident/Incidents.tsx
@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
     },
     progress: {
-      margin: `0 ${theme.spacing(2)}px`,
+      margin: theme.spacing(0, 2),
     },
   }),
 );
diff --git a/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx b/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx
index dd8f0b1909..425f25cc25 100644
--- a/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx
+++ b/plugins/splunk-on-call/src/components/TriggerDialog/TriggerDialog.tsx
@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',
-      minWidth: `calc(100% - ${theme.spacing(2)}px)`,
+      minWidth: `calc(100% - ${theme.spacing(2)})`,
     },
     formHeader: {
       width: '50%',
diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
index cce6af7d6f..ef5992defc 100644
--- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts
@@ -42,7 +42,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
 .md-nav__icon {
   height: 20px !important;
   width: 20px !important;
-  margin-left:${theme.spacing(1)}px;
+  margin-left: ${theme.spacing(1)};
 }
 .md-nav__icon svg {
   margin: 0;
@@ -76,7 +76,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
   width: calc(12.1rem);
 }
 .md-sidebar--secondary {
-  right: ${theme.spacing(3)}px;
+  right: ${theme.spacing(3)};
 }
 .md-sidebar::-webkit-scrollbar {
   width: 5px;
@@ -234,7 +234,7 @@ export default ({ theme, sidebar }: RuleOptions) => `
   #toggle-sidebar {
     display: none;
   }
-  
+
   .md-content {
     margin: 0;
     width: 100%;
diff --git a/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx b/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx
index b524243ff7..e247f05cb6 100644
--- a/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx
+++ b/plugins/xcmetrics/src/components/DatePicker/DatePicker.tsx
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React from 'react';
 import {
   createStyles,
@@ -27,7 +28,7 @@ import {
 const BootstrapInput = withStyles((theme: Theme) =>
   createStyles({
     root: {
-      margin: `${theme.spacing(1)} 0px`,
+      margin: theme.spacing(1, 0),
       maxWidth: 300,
       'label + &': {
         marginTop: theme.spacing(3),