[docs] Fix branding theme tabs and navigation bar regressions (#37362)

Author: ZeeshanTamboli

docs/src/modules/brandingTheme.ts

@@ -741,30 +741,6 @@ export function getThemedComponents(): ThemeOptions {
         defaultProps: {
           disableTouchRipple: true,
         },
-        styleOverrides: {
-          root: ({ theme }) => [
-            {
-              padding: theme.spacing(1),
-              marginBottom: theme.spacing(1),
-              marginRight: theme.spacing(1),
-              fontWeight: 600,
-              minHeight: 32,
-              minWidth: 0,
-              borderRadius: 12,
-              '&:hover': {
-                background: (theme.vars || theme).palette.grey[50],
-              },
-            },
-            theme.applyDarkStyles({
-              '&:hover': {
-                background: (theme.vars || theme).palette.primaryDark[700],
-              },
-              '&.Mui-selected': {
-                color: (theme.vars || theme).palette.primary[300],
-              },
-            }),
-          ],
-        },
       },
       MuiPaper: {
         styleOverrides: {
@@ -778,7 +754,7 @@ export function getThemedComponents(): ThemeOptions {
               ...(ownerState.variant === 'outlined' && {
                 display: 'block',
                 borderColor: (theme.vars || theme).palette.grey[200],
-                ':is(a, button)': {
+                ':is(a&), :is(button&)': {
                   '&:hover': {
                     boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
                   },
@@ -790,7 +766,7 @@ export function getThemedComponents(): ThemeOptions {
               ...(ownerState.variant === 'outlined' && {
                 borderColor: (theme.vars || theme).palette.primaryDark[500],
                 backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                ':is(a, button)': {
+                ':is(a&), :is(button&)': {
                   '&:hover': {
                     boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`,
                   },

docs/src/modules/components/ComponentPageTabs.js

@@ -2,13 +2,35 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import Tab, { tabClasses } from '@mui/material/Tab';
 import Link from 'docs/src/modules/components/Link';
 
 export const HEIGHT = 50;
 
+const StyledTab = styled(Tab)(({ theme }) => ({
+  padding: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  marginRight: theme.spacing(1),
+  fontWeight: 600,
+  minHeight: 32,
+  minWidth: 0,
+  borderRadius: '12px',
+  '&:hover': {
+    background: (theme.vars || theme).palette.grey[50],
+  },
+  ...theme.applyDarkStyles({
+    '&:hover': {
+      background: (theme.vars || theme).palette.primaryDark[700],
+    },
+    '&.Mui-selected': {
+      color: (theme.vars || theme).palette.primary[300],
+    },
+  }),
+}));
+
 export default function ComponentPageTabs(props) {
   const {
     activeTab,
@@ -60,15 +82,15 @@ export default function ComponentPageTabs(props) {
           },
         }}
       >
-        <Tab
+        <StyledTab
           component={Link}
           shallow
           scroll
           href={demosHref}
           label={t('api-docs.demos')}
           value=""
         />
-        <Tab
+        <StyledTab
           component={Link}
           shallow
           scroll
@@ -77,7 +99,7 @@ export default function ComponentPageTabs(props) {
           value="components-api"
         />
         {headers.hooks && headers.hooks.length > 0 && (
-          <Tab
+          <StyledTab
             component={Link}
             shallow
             scroll