css-bug: @mui-treasury/styles/tabs chromeTabsStylesHook z-index interference

[Xenolithes]

Hey y'all,

I actually have found a fix for this bug however for the life of me I can't seem to find the file in this repo that corresponds to the code.

However here is the bug,

https://user-images.githubusercontent.com/49884889/121067726-69918400-c799-11eb-8b4e-4e3a1d84b211.mov

Now the problem is that there are a few pesky zIndexs inside of the styles, I copied pasta the source code and removed them and this is what it looks like afterwards

https://user-images.githubusercontent.com/49884889/121068121-defd5480-c799-11eb-9369-40384d6fb4ff.mov

Below is the updated source code from the websites with the z-indexes set to 0,

I am unsure if the zindexs were intentional, but it looks to me that the component functions the same without them.

If someone directs me to the file for this particular code, I would be more than happy to put in a PR

Sincerely, Evan

import { Theme, ThemeOptions } from '@material-ui/core';
import Color from 'color';

const tabsStyles = {
  indicator: {
    display: 'none',
  },
};

const tabItemStyles = ({
  palette,
  spacing,
  breakpoints,
}: Pick<Theme, 'breakpoints' | 'palette' | 'spacing'>) => {
  const defaultBgColor = palette.grey[300];
  const defaultSelectedBgColor = '#272C34';
  const defaultMinWidth = {
    md: 120,
  };
  const getTextColor = (color: string) => {
    if (Color(color).isLight()) return palette.text.primary;
    return palette.common.white;
  };
  return {
    root: ({
      bgColor = defaultBgColor,
      minWidth = defaultMinWidth,
    }: {
      bgColor?: string;
      minWidth?: { md: number };
    }) => ({
      opacity: 1,
      overflow: 'initial',
      paddingLeft: spacing(2),
      paddingRight: spacing(2),
      borderTopLeftRadius: spacing(1),
      borderTopRightRadius: spacing(1),
      color: getTextColor(bgColor),
      backgroundColor: bgColor,
      transition: '0.2s',
      [breakpoints.up('md')]: {
        minWidth: minWidth.md,
      },
      '&:before': {
        transition: '0.2s',
      },
      '&:not(:first-of-type)': {
        '&:before': {
          content: '" "',
          position: 'absolute',
          left: 0,
          display: 'block',
          height: 20,
          width: 1,
          zIndex: 0,
          marginTop: spacing(0.5),
          backgroundColor: palette.grey[500],
        },
      },
      '& + $selected:before': {
        opacity: 0,
      },
      '&:hover': {
        '&:not($selected)': {
          backgroundColor: Color(bgColor).whiten(0.6).hex(),
        },
        '&::before': {
          opacity: 0,
        },
        '& + $root:before': {
          opacity: 0,
        },
      },
    }),
    selected: ({
      selectedBgColor = defaultSelectedBgColor,
    }: {
      selectedBgColor?: string;
    }) => ({
      backgroundColor: selectedBgColor,
      color: getTextColor(selectedBgColor),
      '& + $root': {
        zIndex: 0,
      },
      '& + $root:before': {
        opacity: 0,
      },
    }),
    wrapper: {
      zIndex: 0,
      marginTop: spacing(0.5),
      textTransform: 'initial',
    },
  };
};