更改 Material UI 选项卡组件上的滚动按钮图标答案

【问题标题】：Change scroll button Icon on Material UI Tabs component更改 Material UI 选项卡组件上的滚动按钮图标
【发布时间】：2020-05-21 07:39:40
【问题描述】：

我需要更改 Tabs 组件的滚动按钮（左右）的图标。

有个叫'ScrollButtonComponent'的props，但是不知道怎么在按钮里面放不同的左右图标。

Print of the component

https://material-ui.com/components/tabs/

【问题讨论】：

标签： reactjs scroll tabs navigation material-ui

【解决方案1】：

不要更改节点模块中的代码当然，最好不要触摸节点模块文件夹中的代码，一方面，当您运行 npm install/update（或 yarn）时，您的所有更改都将被覆盖，而当他们使用您的 repo 时，没有其他人能够复制，因为您没有将节点模块签入 git。

这是确切的解决方案：

文档：https://material-ui.com/api/tabs/

material-ui 文档中没有太多详细信息。在这里您可以做的是有一个名为 ScrollButtonComponent 的属性。您可以从中更改左/右图标。

 <Tabs
    value={value}
    classes={{ indicator: classes.tabsIndicator }}
    onChange={handleChange}
    indicatorColor="primary"
    textColor="primary"
    ScrollButtonComponent={(props) => {
        if (
            props.direction === "left" &&
            props.visible
        ) {
            return (
                <IconButton {...props}>
                    <FontAwesomeIcon
                        style={{
                            marginLeft: "7px"
                        }}
                        color="#007474"
                        icon="arrow-left"
                    />
                </IconButton>
            );
        } else if (
            props.direction === "right" &&
            props.visible
        ) {
            return (
                <IconButton {...props}>
                    <FontAwesomeIcon
                        style={{
                            marginLeft: "7px"
                        }}
                        color="#007474"
                        icon="arrow-right"
                    />
                </IconButton>
            );
        } else {
            return null;
        }
    }}
    variant="scrollable"
    scrollButtons="on"
    aria-label="full width tabs example"
  >
    <Tab label="Item One" icon={<PhoneIcon />} {...a11yProps(0)} />
    <Tab label="Item Two" icon={<FavoriteIcon />} {...a11yProps(1)} />
</Tabs>

【讨论】：

【解决方案2】：

请转到 nodeModule 文件夹中的 TabScrollButton.js 然后在 ButtonBase 部分更改 KeyboardArrowLeft 或 KeyboardArrowRight 。 TabScrollButton

<ButtonBase
      component="div"
      className={className}
      ref={ref}
      role={null}
      tabIndex={null}
      {...other}
    >
      {direction === 'left' ? (
        <KeyboardArrowLeft fontSize="small" />
      ) : (
        <KeyboardArrowRight fontSize="small" />
      )}
    </ButtonBase>
  );

【讨论】：