From 0b38a1532e706fe4733e5768378205f7e00081f1 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Mon, 11 Mar 2024 15:59:09 +0100
Subject: [PATCH] fix: <p> cannot appear as a descendant of <p>.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

In some locations we had <Typography variant=“body1”> nested inside another <Typography> this renders 2 <p> tags inside of each-other and that is not valid.
The other way around was having a <Box> that is nested inside of a Typograpühy which also seems to be not valid.
---
 src/components/theme/safeTheme.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/theme/safeTheme.ts b/src/components/theme/safeTheme.ts
index 76238d57a6..87fd62a1b7 100644
--- a/src/components/theme/safeTheme.ts
+++ b/src/components/theme/safeTheme.ts
@@ -81,6 +81,14 @@ const createSafeTheme = (mode: PaletteMode): Theme => {
     ] as Shadows,
     typography,
     components: {
+      MuiTypography: {
+        defaultProps: {
+          variantMapping: {
+            body1: 'div',
+            body2: 'div',
+          },
+        },
+      },
       MuiTableCell: {
         styleOverrides: {
           head: ({ theme }) => ({