Merge pull request #864 from sudhanshutech/tabs/theme

[theme]: tabs custom theme

Author: sudhanshutech

src/theme/components.ts

@@ -17,7 +17,8 @@ import { MuiOutlinedInput } from './components/outlinedinput.modifier';
 import { MuiPagination } from './components/pagination.modifier';
 import { MuiSvgIcon } from './components/svgicon.modifier';
 import { MuiSwitch } from './components/switch.modifier';
-import { MuiTab } from './components/tab.modifier.ts';
+import { MuiTab } from './components/tab.modifier';
+import { MuiTabs } from './components/tabs.modifier';
 
 export const components: Components<Theme> = {
   MuiAppBar,
@@ -35,6 +36,7 @@ export const components: Components<Theme> = {
   MuiPagination,
   MuiSvgIcon,
   MuiTab,
+  MuiTabs,
   MuiSwitch,
   MuiButtonGroup,
   MuiButton,

src/theme/components/tab.modifier.ts.ts renamed to src/theme/components/tab.modifier.ts

@@ -14,8 +14,8 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
           color: defaultText,
           backgroundColor: defaultBackground
         },
-        backgroundColor: defaultText,
-        color: defaultBackground
+        backgroundColor: 'none',
+        color: defaultText
       };
     }
   }

src/theme/components/tabs.modifier.ts

@@ -0,0 +1,12 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiTabs: Components<Theme>['MuiTabs'] = {
+  styleOverrides: {
+    root: ({ theme }) => ({
+      backgroundColor: theme.palette.background.default
+    }),
+    indicator: ({ theme }) => ({
+      backgroundColor: theme.palette.background.brand?.default
+    })
+  }
+};