TabScrollButton component is in charge of displaying the arrow buttons. It is possible to apply customized styles to them. Simply hiding the arrows can cause the entire tab menu to shift abruptly. I would suggest narrowing the widths of the arrows instead, to prevent a wide gap. However, if you still prefer to hide them completely, we could implement a transition effect and reduce the width of inactive arrows to 0.

import TabScrollButton from '@material-ui/core/TabScrollButton';
import { withStyles} from '@material-ui/core/styles';

const MyTabScrollButton = withStyles(theme => ({
  root: {
    width: 28,
    overflow: 'hidden',
    transition: 'width 0.5s',
    '&.Mui-disabled': {
      width: 0,
    },
  },
}))(TabScrollButton);

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

A different approach I took was utilizing the styled method to customize MyTabScrollButton:

const StyledTabScrollButton = styled(TabScrollButton)({
    '&.Mui-disabled': {
        width: 0,
    },
    overflow: 'hidden',
    transition: 'width 0.5s',
    width: 28,
});

Here is a designated area for scrollable arrows. You have the option to utilize a basic tab version that does not require

scrollable

property, eliminating any excess space.

Alternatively, you can customize the current scrollable arrows by implementing your own component with appropriate styles such as absolute positioning. For instance:

        <Tabs
          ScrollButtonComponent={() => {
            return (
              <a style={
               { height: "10px", position: "absolute" }}>
                scroll
              </a>
            );
         />

By enabling the scrollable feature, you can make the navbar scroll within its viewport if it doesn't fit. The default behavior includes adding a space to accommodate the navigation arrows.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
});

class ScrollableTabsButtonAuto extends React.Component {
  state = {
    value: 0,
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            scrollButtons="auto"
          >
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
            <Tab label="Item Four" />
            <Tab label="Item Five" />
            <Tab label="Item Six" />
            <Tab label="Item Seven" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Item One</TabContainer>}
        {value === 1 && <TabContainer>Item Two</TabContainer>}
        {value === 2 && <TabContainer>Item Three</TabContainer>}
        {value === 3 && <TabContainer>Item Four</TabContainer>}
        {value === 4 && <TabContainer>Item Five</TabContainer>}
        {value === 5 && <TabContainer>Item Six</TabContainer>}
        {value === 6 && <TabContainer>Item Seven</TabContainer>}
      </div>
    );
  }
}

ScrollableTabsButtonAuto.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ScrollableTabsButtonAuto);

Hopefully, this information is beneficial! :)

I came up with a CSS solution for this problem

.parentDiv div[class*="MuiTabs-scrollButtonsAuto"] {
    display: none;
}

; where .parentDiv refers to the parent div's class.

In one of the 2 empty boxes, you will find a class named MuiTabs-scrollButtonsAuto-nnn, and vice versa.

Note: This solution may not be effective on production builds as MUI classes could be minified into short-hand class names like .jss3001 (unknown which plugin does the minification during build). I have encountered this issue on production builds myself.

Update: To address issues in build versions where class names are minified or converted, I have another workaround. The tabs are located between two scroll arrows, one of them being a button when active. By targeting the 1st and 3rd child divs, this method hides those elements. While not very flexible, it eliminates the need to use multiple MUI Tab versions. It is compatible with both development and production builds.

.parentDiv > div:nth-child(2) > div:nth-child(1):not([type="button"]) {
    display: none;
}
.parentDiv > div:nth-child(2) > div:nth-child(3):not([type="button"]) {
    display: none;
}

To achieve this, simply apply padding to the Tab component using inline styles as demonstrated in this example.

<Tabs value={value} onChange={this.handleChange}>
    <Tab style={{paddingLeft: 0, paddingRight: 0}} label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
</Tabs> 

This is the CSS code that worked perfectly for me:

.MuiTabScrollButton-root.Mui-disabled {
  display: none;
}