如何禁用tabindicator并设置溢出以滚动到材质ui选项卡容器?

时间:2019-09-23 09:25:13

标签: css reactjs material-ui

我制作了一个带有垂直材质ui标签的下拉菜单。我希望下拉列表具有普通的Webkit滚动条,而不是显示在活动选项卡右侧的指示器。但是我不知道在哪里放置溢出样式。并设置overflowY:在根目录上滚动不起作用。

https://i.ibb.co/Tw5dkZq/Screenshot-50.png

const useStyles = makeStyles(theme => ({
root: {
  overflowY: 'scroll',
  flexGrow: 1,
  backgroundColor: theme.palette.background.paper,
  display: 'flex',
  height: 400,
  width: 250,
  position: 'absolute',
  bottom: 0,
  left: 0,
  boxShadow: "0.1px 0.1px 15px 0.1px #C9C9C9"
},
}));


<div className={classes.root}>
  <Tabs
    orientation="vertical"
    variant="scrollable"
    value={value}
    onChange={handleChange}
    aria-label="Vertical tabs example"
    className={classes.tabs}
    className="tabs">
     {
      categories.map(({category_name,category_id,category_image}, index) => 
          <Tab id={category_id} 
          label={<span style={{ color: index === value ? '#157ebc' : "", width: 170, textAlign: 'left'}}>{category_name}</span>} 
          {...a11yProps(index)} className={classes.tab} className="dropdown-tab" />)
    }
  </Tabs>
</div>

0 个答案:

没有答案