diff --git a/.changeset/neat-lamps-press.md b/.changeset/neat-lamps-press.md
new file mode 100644
index 0000000000..23c0b15fb7
--- /dev/null
+++ b/.changeset/neat-lamps-press.md
@@ -0,0 +1,8 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-splunk-on-call': patch
+'@backstage/plugin-xcmetrics': patch
+'@backstage/plugin-catalog': patch
+---
+
+Prefer simple `theme.spacing` without string interpolation
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/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),