如何在 Material-UI 滚动选项卡中创建自定义滚动图标

Question

我正在使用 Material-UI 中的Scrollable tabs。如何更改滚动箭头的svg 图标？

我看到您可以使用 TabScrollButton 组件。那么我必须为左右箭头创建一个吗？

在 Tabs 组件中，您可以传递一个 prop ScrollButtonComponent。但是我必须如何使用它呢？

我在下面尝试过，但还不行：

import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import TabScrollButton from '@material-ui/core/TabScrollButton';

import { CloseIcon } from 'app/components/atoms/icons';

const MyCarousel = ({ value }: Props) => {
  const selectedItem = value;

  const scrollButton = () => {
    return (
      <div>
        <TabScrollButton orientation="horizontal" direction="right">
          {CloseIcon}
        </TabScrollButton>
      </div>
    );
  };

  return (
    <div css={styles.root}>
      <Tabs
        value={value}
        indicatorColor="primary"
        variant="scrollable"
        scrollButtons="auto"
        aria-label="scrollable auto tabs example"
        ScrollButtonComponent={scrollButton}
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
        <Tab label="Item 4" />
        <Tab label="Item 5" />
        <Tab label="Item 6" />
        <Tab label="Item 7" />
        <Tab label="Item 8" />
        <Tab label="Item 9" />
      </Tabs>
    </div>
  );
};

export default MyCarousel;

Answer 1

你已经接近了。 TabScrollButton 是 ScrollButtonComponent 的 default props。不幸的是，TabScrollButton 没有提供任何道具来覆盖后退/前进图标。所以你必须自己创建一个。

这是TabScrollButton 的定义。您要做的是复制定义，删除不必要的部分并添加您自己的图标。下面是一个例子：

import ButtonBase from "@material-ui/core/ButtonBase";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";

const MyTabScrollButton = forwardRef((props, ref) => {
  const { direction, ...other } = props;

  return (
    <ButtonBase
      component="div"
      ref={ref}
      style={{ opacity: other.disabled ? 0 : 1 }}
      {...other}
    >
      {direction === "left" ? (
        <ArrowBackIcon fontSize="small" />
      ) : (
        <ArrowForwardIcon fontSize="small" />
      )}
    </ButtonBase>
  );
});

<Tabs
  {...tabsProps}
  variant="scrollable"
  scrollButtons="auto"
  ScrollButtonComponent={MyTabScrollButton}
>
  {...}
</Tabs>

现场演示