try zeeshan solution

mui · Jun 7, 2024 · ecca634 · ecca634
1 parent 2a2ff79
commit ecca634
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
@@ -42,6 +42,9 @@ const TabRoot = styled(ButtonBase, {
       styles[`textColor${capitalize(ownerState.textColor)}`],
       ownerState.fullWidth && styles.fullWidth,
       ownerState.wrapped && styles.wrapped,
+      {
+        [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper,
+      },
     ];
   },
 })(({ theme }) => ({

diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
@@ -4,6 +4,7 @@ import { spy } from 'sinon';
 import { act, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import Tab, { tabClasses as classes } from '@mui/material/Tab';
 import ButtonBase from '@mui/material/ButtonBase';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Tab />', () => {
@@ -167,4 +168,26 @@ describe('<Tab />', () => {
       expect(style).to.have.property('alignText', 'center');
     });
   });
+
+  it('should apply iconWrapper styles from theme', () => {
+    const theme = createTheme({
+      components: {
+        MuiTab: {
+          styleOverrides: {
+            iconWrapper: {
+              backgroundColor: 'rgb(0, 0, 255)',
+            },
+          },
+        },
+      },
+    });
+
+    const { getByRole } = render(
+      <ThemeProvider theme={theme}>
+        <Tab icon={<div>hello</div>} />
+      </ThemeProvider>,
+    );
+    const tab = getByRole('tab');
+    expect(tab).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
+  });
 });