我不能分享完整的代码，因为它与其他与这个问题无关的代码混合在一起，但这里有一些类似的代码，我可以分享：

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";
import Box from "@material-ui/core/Box";
import Tabs from "@material-ui/core/Tabs";
import IconButton from "@material-ui/core/IconButton";
import styled from "@emotion/styled";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeftRounded";
import ChevronRightIcon from "@material-ui/icons/ChevronRightRounded";

const StyledChip = styled(Chip)`
  border-radius: 16px;
  text-transform: capitalize;
  color: ${(props) => (props.selected ? "#FFFFFF" : "#6877AE")};
  background-color: ${(props) => (props.selected ? "#03194F" : "#FFFFFF")};
  border: 4px solid ${"#03194F"};
  border-color: ${(props) =>
    props.selected ? "#03194F" : "rgba(0, 83, 229, 0.12)"};

  .MuiChip-root&:hover {
    background-color: ${(props) => (props.selected ? "#03194F" : "")};
  }
`;

const StyledIconButton = styled(IconButton)`
  left: ${(props) => (props.isLeft ? "0" : "none")};
  right: ${(props) => (props.isLeft ? "none" : "0")};

  height: 32px;
  width: 32px;
  position: absolute;
  border-radius: 16px;
  border: 1px solid gray;
  //top: 33%;
  background-color: white;
  color: rgba(0, 83, 229, 1);
  border-color: rgba(0, 83, 229, 0.12);

  z-index: 1;
  opacity: 1;
  margin: 20px;

  :hover {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
      0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12);
    border-color: white;
    background-color: inherit;
  }
`;

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    justifyContent: "center",
    flexWrap: "nowrap",
    listStyle: "none",
    padding: theme.spacing(0.5),
    margin: 0,
    overflow: "auto",
    maxWidth: "100%"
  },
  chip: {
    margin: theme.spacing(2)
  }
}));

export default function ChipsArray() {
  const classes = useStyles();
  const [chipData, setChipData] = React.useState([
    { key: 0, label: "Angular" },
    { key: 1, label: "jQuery" },
    { key: 2, label: "Polymer" },
    { key: 3, label: "React" },
    { key: 4, label: "Vue" },
    { key: 5, label: "Knockout" },
    { key: 6, label: "Ember" },
    { key: 7, label: "D3" },
    { key: 8, label: "Google Charts" },
    { key: 9, label: "C+" },
    { key: 10, label: "C++" },
    { key: 11, label: "NodeJS" }
  ]);

  const [selectedIndustryFilter, setSelectedIndustryFilter] = React.useState(
    "Angular"
  );

  return (
    <Box className={classes.root}>
      <Tabs
        variant="scrollable"
        scrollButtons="on"
        aria-label="scrollable auto tabs example"
        ScrollButtonComponent={(props) => {
          if (props.direction === "left") {
            return (
              <StyledIconButton isLeft {...props}>
                <ChevronLeftIcon />
              </StyledIconButton>
            );
          } else if (props.direction === "right") {
            return (
              <StyledIconButton {...props}>
                <ChevronRightIcon />
              </StyledIconButton>
            );
          } else {
            return null;
          }
        }}
      >
        {chipData.map((data) => {
          return (
            <StyledChip
              label={data.label}
              onClick={() => {
                setSelectedIndustryFilter(data.label);
                console.log(data.label);
              }}
              selected={data.label === selectedIndustryFilter}
              key={data.key}
              className={classes.chip}
            />
          );
        })}
      </Tabs>
    </Box>
  );
}

也可以在这里查看：https://codesandbox.io/s/demo-material-ui-chips-single-line-with-scroll-forked-2f0z30?file=/src/App.js

也许您可以尝试使用像这样的库：
react-material-ui-carousel
不要在此组件中放入图像，而是尝试放入卡片。

您需要按钮，还是只需要水平滚动？这是一个简单的图像水平滚动部分的示例：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
  },
  gridList: {
    flexWrap: 'nowrap'
  }
}));

const tileData = [
{
  img: 'images/image1.jpg',
  title: 'title'
},
{
  img: 'images/image2.jpg',
  title: 'title'
},
{
  img: 'images/image3.jpg',
  title: 'title'
}
];

export default function SingleLineGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={2.5}>
        {tileData.map((tile) => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />            
            <GridListTileBar
              title={tile.title}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

我认为对于按钮，您需要为3的每个部分设置一个<div>，并在每个按钮上设置href=#id。

你可以使用下面的代码来完成它。我已经使用了一些CSS属性来使它工作。这将删除额外的使用箭头水平滚动。
我在Netflix的克隆应用程序中使用过这个。这是一个行组件。我在主页中使用过它，并将不同类型的电影列表传递给它。根据类型，它将连续显示不同的电影。

<div className="row">
  {/* title */}
  <h2>{title}</h2>
  {/* container -> posters */}
  <div className="row__posters">
    {/* several row posters */}
    {movies.map((movie) => (
      <img
        key={movie.id}            
        className="row__poster row__posterLarge"
        src={`${image_base_url}${
          isLargeRow ? movie.poster_path : movie.backdrop_path
        }`}
        alt={movie.name}
      />
    ))}
  </div>
</div>

下面是用于上述组件的CSS。

.row {
  margin-left: 20px;
  color: white;
}

.row__posters {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 20px;
}

.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {
  width: 100%;
  object-fit: contain;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row__posterLarge {
  max-height: 250px;
}

.row__posterLarge:hover {
  transform: scale(1.09);
}

.row__poster:hover {
  transform: scale(1.08);
}