小设备时的材质 UI 箭头

Question

我正在编写一个标签栏，但我注意到我的标签栏在宽度低于 600 像素时没有显示指示箭头按钮 ()。

我想这样做：

但是当它低于 600px 时显示如下：

任何人都可以帮助我如何在宽度低于 600 像素时添加此箭头指示器？

这是我的代码：

import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Grid from '@material-ui/core/Grid';

const StyledTabs = withStyles({
  indicator: {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    '& > span': {
      maxWidth: 80,
      width: '100%',
      backgroundColor: 'black',
    },
  },
})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />);

const StyledTab = withStyles((theme) => ({
  root: {
    textTransform: 'none',
    color: '#000',
    fontWeight: theme.typography.fontWeightRegular,
    fontSize: theme.typography.pxToRem(18),
    '&:focus': {
      opacity: 1,
    },
  },
}))((props) => <Tab disableRipple {...props} />);

const GalleryPage = () => {
  const [filterEvent, setFilterEvent] = React.useState('All');

  const handleChangeEvent = (event, newEvent) => {
    setFilterEvent(newEvent);
  };

  return (
    <div>
      <Grid container justify="center" alignItems="flex-start">
        <StyledTabs variant="scrollable" value={filterEvent} onChange={handleChangeEvent} aria-label="styled tabs example">
          <StyledTab label="AAAAAA" value="All" />
          <StyledTab label="BBBBBB" value="Hiking" />
          <StyledTab label="CCCCCC" value="J-On" />
          <StyledTab label="DDDDDD" value="Language Exchange" />
          <StyledTab label="FFFFFF" value="Picnic" />
          <StyledTab label="HHHHHH" value="Random" />
          <StyledTab label="TTTTTT" value="Takusai" />
        </StyledTabs>
      </Grid>
    </div>
  );
};

export default GalleryPage;