[RTT-05] feature/MUI-Setup-global-style

Author: letuankiet212

src/App.tsx

@@ -1,4 +1,4 @@
-import { debounce } from '@mui/material';
+import { debounce, Typography } from '@mui/material';
 import { useEffect, useReducer, useState } from 'react';
 import services from './api/index';
 import './App.css';
@@ -48,6 +48,7 @@ function App() {
 
 	return (
 		<div className="App">
+			<Typography variant="h3">Hello word</Typography>
 			<div className={`wrapper ${isSuccess && 'active'}`}>
 				<header>
 					<i className="bx bx-left-arrow-alt" onClick={() => setIsSuccess(false)}></i>Weather App

src/assets/style/abstracts/variables.tsx

@@ -0,0 +1,35 @@
+/**
+ * @style CssBaseLine,
+ * @description Style for global,
+ * @link docs : https://mui.com/material-ui/react-css-baseline/#main-content
+ */
+export default {
+	primary: {
+		main: '#81c784',
+		contrastText: '#000000',
+	},
+	secondary: {
+		main: '#ffb74d',
+		contrastText: '#000',
+	},
+	info: {
+		main: '#0277bd',
+		contrastText: '#FFFFFF',
+	},
+	success: {
+		main: '#2e7d32',
+		contrastText: '#FFFFFF',
+	},
+	warning: {
+		main: '#f9a825',
+		contrastText: '#FFFFFF',
+	},
+	error: {
+		main: '#c62828',
+		contrastText: '#FFFFFF',
+	},
+
+	text: {
+		primary: 'white',
+	},
+} as const;

src/assets/style/base/global.tsx

@@ -0,0 +1,23 @@
+import { Theme } from '@mui/material';
+
+/**
+ * @style CssBaseLine,
+ * @description Style for global,
+ * @link docs : https://mui.com/material-ui/react-css-baseline/#main-content
+ */
+export default {
+	styleOverrides: (themeParam: Theme) => `
+        :root{
+            --mui-header-height: 3.875rem;
+            --mui-footer-height: 14.5rem;
+        }
+
+        body{
+            background-color: ${themeParam.palette.secondary.contrastText}
+        }
+        
+        .content-default-layout{
+            min-height: calc(100vh - (var(--mui-header-height) + var(--mui-footer-height)))
+        }
+    `,
+} as const;

src/assets/style/base/typography.tsx

@@ -0,0 +1,9 @@
+/**
+ * @style typography,
+ * @description Style for typography,
+ * @link docs : https://mui.com/material-ui/react-typography/#main-content
+ */
+export default {
+	htmlFontSize: 16,
+	fontSize: 12,
+} as const;

src/mui-config.tsx

@@ -1,46 +1,18 @@
-import { createTheme, ThemeProvider, StyledEngineProvider, CssBaseline, Theme } from '@mui/material/';
+//Github https://github.com/karpolan/react-mui-pro-starter/tree/main/src/components
 
-const FRONT_COLORS = {
-	primary: {
-		main: '#81c784',
-		contrastText: '#000000',
-	},
-	secondary: {
-		main: '#ffb74d',
-		contrastText: '#000',
-	},
-	info: {
-		main: '#0277bd',
-		contrastText: '#FFFFFF',
-	},
-	success: {
-		main: '#2e7d32',
-		contrastText: '#FFFFFF',
-	},
-	warning: {
-		main: '#f9a825',
-		contrastText: '#FFFFFF',
-	},
-	error: {
-		main: '#c62828',
-		contrastText: '#FFFFFF',
-	},
-};
+import { createTheme, ThemeProvider, StyledEngineProvider, CssBaseline } from '@mui/material/';
+import global from './assets/style/base/global';
+import typography from './assets/style/base/typography';
+import variables from './assets/style/abstracts/variables';
 
 const DEFAULT_THEME = {
 	palette: {
-		...FRONT_COLORS,
+		...variables,
 	},
+	typography,
 	components: {
 		MuiCssBaseline: {
-			styleOverrides: (themeParam: Theme) => `
-				h1 {
-					color: ${themeParam.palette.success.main};
-				},
-				body{
-					background-color: ${themeParam.palette.secondary.contrastText}
-				}
-			`,
+			...global,
 		},
 	},
 };