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

Posted 2023-04-13

【中文标题】更改 Material UI 选项卡组件上的滚动按钮图标

【英文标题】：Change scroll button Icon on Material UI Tabs component

【发布时间】：2020-05-21 07:39:40

【问题描述】：

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

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

Print of the component

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

【参考方案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>
  );