reactjs - 反应材料 UI 中的单行图像列表

Question

在 React Material UI 中，我不想滚动图像列表下方的滚动条。我怎样才能删除它？我想在没有滚动条的情况下在一行中成为多个图像（溢出 x）

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
    backgroundColor: theme.palette.background.paper,
  },
  imageList: {
    flexWrap: 'nowrap',
    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
    transform: 'translateZ(0)',
  },
  title: {
    color: theme.palette.primary.light,
  },
  titleBar: {
    background:
      'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
  },
}));

export default function PromotionProduct(params) {
  const classes = useStyles();

  return (
    <Container className='mt-4 '>
      <Grid container spacing={3} className='pb-2'>
        <Grid item xs={6} className='pb-0'>
          <p className='mb-0'> PROMOTIONS Products</p>
        </Grid>
        <Grid item xs={6} className='pb-0'>
          <div className='tertiary-text text-right'>View More</div>
        </Grid>
      </Grid>

      <div className={classes.root}>
        <ImageList className={classes.imageList} cols={1.3}>
          <ImageListItem>
            <img src={image} />
            <ImageListItemBar
              title='Product'
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star Product`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </ImageListItem>
          <ImageListItem>
            <img src={image} />
            <ImageListItemBar
              title='Product'
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star Product`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </ImageListItem>
          <ImageListItem>
            <img src={image} />
            <ImageListItemBar
              title='Product'
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star Product`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </ImageListItem>
        </ImageList>
      </div>
    </Container>
  );
}

Answer 1

如果您不想滚动图像并且图像填充框的宽度，您可以使用flex父框应该是的样式flex:1，flex-direction:row并且图像应该是flex:1它​​们相等width并填充父框的宽度

Answer 2

如果要隐藏滚动条但保持滚动功能：

  imageList: {
    flexWrap: 'nowrap',
    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
    transform: 'translateZ(0)',
    
    // Hide Scrollbar
    '-ms-overflow-style': 'none',  /* IE and Edge */
    'scrollbar-width': 'none'  /* Firefox */
    '&::-webkit-scrollbar': { /* Chrome */
        display: none;
    }:
  }