diff --git a/.changeset/sharp-terms-tap.md b/.changeset/sharp-terms-tap.md new file mode 100644 index 0000000000..72e888a94e --- /dev/null +++ b/.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 diff --git a/packages/core-components/src/components/Tabs/Tab.tsx b/packages/core-components/src/components/Tabs/Tab.tsx index 571640d970..52c49ba1f8 100644 --- a/packages/core-components/src/components/Tabs/Tab.tsx +++ b/packages/core-components/src/components/Tabs/Tab.tsx @@ -37,24 +37,30 @@ const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => { return '40px'; }; -const useStyles = makeStyles(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( + 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);