update,

jamespong14205/task1/project/003_src/client/config/StyledMaterialThemeProvider.js

@@ -0,0 +1,15 @@
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { StylesProvider } from '@mui/styles';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+
+const MyThemeProvider = ({ theme, children }) => (
+  <StylesProvider injectFirst>
+    <CssBaseline />
+    <StyledThemeProvider theme={theme}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </StyledThemeProvider>
+  </StylesProvider>
+);
+
+export default MyThemeProvider;

jamespong14205/task1/project/003_src/client/config/theme.js

@@ -0,0 +1,37 @@
+import { red } from '@mui/material/colors';
+import { createTheme } from '@mui/material/styles';
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: 'h2',
+          h2: 'h2',
+          h3: 'h2',
+          h4: 'h2',
+          h5: 'h2',
+          h6: 'h2',
+          subtitle1: 'h2',
+          subtitle2: 'h2',
+          body1: 'span',
+          body2: 'span',
+        },
+      },
+    },
+  },
+});
+
+export default theme;