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

Question

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

有一个道具叫做'ScrollButtonComponent，但是我不知道如何在按钮中放置不同的左右图标。

Print of the component

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

Answer 1

请转到 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>
  );

Answer 2

不要更改节点模块中的代码当然，建议永远不要触摸节点模块文件夹中的代码，一方面，当您运行 npm install/update （或纱线）时，您的所有更改都将被覆盖，并且当其他人使用您的 repo 时，他们将无法复制，因为您没有将节点模块签入git.

这是正确的解决方案：

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

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

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

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

Change scroll button Icon on Material UI Tabs component

navigation

tabs

scroll

reactjs

material-ui