Merge pull request #10554 from saan800/tab_class_name

Add name for BackstageTab styles

.changeset/sharp-terms-tap.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Adding a name to the core-components Tab styles so can customise in the theme settings

packages/core-components/src/components/Tabs/Tab.tsx

@@ -37,24 +37,30 @@ const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => {
   return '40px';
 };
 
-const useStyles = makeStyles<BackstageTheme, StyledTabProps>(theme => ({
-  root: {
-    textTransform: 'none',
-    height: '64px',
-    fontWeight: theme.typography.fontWeightBold,
-    fontSize: theme.typography.pxToRem(13),
-    color: theme.palette.textSubtle,
-    marginLeft: props =>
-      tabMarginLeft(props.isFirstNav as boolean, props.isFirstIndex as boolean),
-    width: '130px',
-    minWidth: '130px',
-    '&:hover': {
-      outline: 'none',
-      backgroundColor: 'transparent',
+const useStyles = makeStyles<BackstageTheme, StyledTabProps>(
+  theme => ({
+    root: {
+      textTransform: 'none',
+      height: '64px',
+      fontWeight: theme.typography.fontWeightBold,
+      fontSize: theme.typography.pxToRem(13),
       color: theme.palette.textSubtle,
+      marginLeft: props =>
+        tabMarginLeft(
+          props.isFirstNav as boolean,
+          props.isFirstIndex as boolean,
+        ),
+      width: '130px',
+      minWidth: '130px',
+      '&:hover': {
+        outline: 'none',
+        backgroundColor: 'transparent',
+        color: theme.palette.textSubtle,
+      },
     },
-  },
-}));
+  }),
+  { name: 'BackstageTab' },
+);
 
 export const StyledTab = (props: StyledTabProps) => {
   const classes = useStyles(props);