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

Question

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

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

在选项卡组件中，您可以传递一个 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 是 default props ScrollButtonComponent 的。不幸的是，TabScrollButton 不提供任何 Prop 来覆盖后退/前进图标。所以你必须自己创建一个。

这是 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>

现场演示