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

Posted 2023-02-22

【中文标题】反应材料 UI 中的单行图像列表

【英文标题】：Single line image list in react material UI

【发布时间】：2021-11-04 03:46:16

【问题描述】：

在 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>
  );

【问题讨论】：

你能在codesandbox分享一个简单的代码示例吗？

我会给你原始文档链接。 material-ui.com/components/image-list/#single-line-image-list

【参考方案1】：

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

  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;
    :
  

【讨论】：

谢谢先生。有用。我是通过使用 WebKit 做到的。

【参考方案2】：

如果您不想滚动图像并且图像填充框的宽度，您可以使用flex 样式，父框应为flex:1 和flex-direction:row，图像应为flex:1，因此它们有等于width 并填充父宽度

【讨论】：

谢谢，兄弟，我试试 flex 样式。