react material UI中的单线图像列表

Question

在React Material UI中，我不想滚动下面图像列表中的滚动条。我怎么才能删除它呢？我想在没有滚动条的单行中显示多个图像(overflow 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;
    }:
  }