diff --git a/libs/gi/ui/src/util/getCalcDisplay.tsx b/libs/gi/ui/src/util/getCalcDisplay.tsx
index cdc603dd2c..67a1dbf775 100644
--- a/libs/gi/ui/src/util/getCalcDisplay.tsx
+++ b/libs/gi/ui/src/util/getCalcDisplay.tsx
@@ -13,6 +13,7 @@ import {
 import { Translate } from '@genshin-optimizer/gi/i18n'
 import type { CalcResult } from '@genshin-optimizer/gi/uidata'
 import type { Info, InfoExtra, KeyMapPrefix } from '@genshin-optimizer/gi/wr'
+import { Typography } from '@mui/material'
 import { useContext, type ReactNode } from 'react'
 import { SillyContext } from '../context'
 import { resolveInfo } from './resolveInfo'
@@ -220,18 +221,15 @@ function computeFormulaDisplay(
 
   components.filter((c) => c)
   result.formula = (
-    <>
+    <Typography
+      sx={{
+        textDecoration: info.strikethrough ? 'line-through' : undefined,
+      }}
+    >
       {components.map((x, i) => (
-        <span
-          style={{
-            textDecoration: info.strikethrough ? 'line-through' : undefined,
-          }}
-          key={i}
-        >
-          {x}
-        </span>
+        <span key={i}>{x}</span>
       ))}
-    </>
+    </Typography>
   )
 
   return result