chore: use styled instead of sx

Unleash · Nov 25, 2024 · b1a809a · b1a809a
1 parent a4a5321
commit b1a809a
Showing 1 changed file with 13 additions and 9 deletions.
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneStrategyTitle.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneStrategyTitle.tsx
@@ -1,6 +1,14 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, styled } from '@mui/material';
 import Input from 'component/common/Input/Input';
 
+const StyledBox = styled(Box)(({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+}));
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+}));
+
 interface IMilestoneStrategyTitleProps {
     title: string;
     setTitle: (title: string) => void;
@@ -11,21 +19,17 @@ export const MilestoneStrategyTitle = ({
     setTitle,
 }: IMilestoneStrategyTitleProps) => {
     return (
-        <Box sx={{ paddingBottom: (theme) => theme.spacing(2) }}>
-            <Typography
-                sx={{
-                    paddingBottom: (theme) => theme.spacing(2),
-                }}
-            >
+        <StyledBox>
+            <StyledTypography>
                 What would you like to call this strategy? (optional)
-            </Typography>
+            </StyledTypography>
             <Input
                 label='Strategy title'
                 id='title-input'
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 sx={{ width: '100%' }}
             />
-        </Box>
+        </StyledBox>
     );
 };