【问题讨论】：
div，使其不显示 .j260 {display: none;}
标签： css reactjs material-ui
您可以通过使用本示例中的样式为 Tab 组件提供填充来做到这一点。
<Tabs value={value} onChange={this.handleChange}>
<Tab style={{paddingLeft: 0, paddingRight: 0}} label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
【讨论】：
这是可滚动箭头的空间。您可以使用没有
的简单选项卡版本scrollable
属性和空白空间将被删除。
或者，您可以将当前的可滚动箭头替换为具有适当样式的组件，例如绝对定位等：
<Tabs
ScrollButtonComponent={() => {
return (
<a style={
{ height: "10px", position: "absolute" }}>
scroll
</a>
);
/>
【讨论】：
这应该删除空格，可滚动意味着如果导航栏无法适应其视口，则可以滚动导航栏，默认情况下，这会在文本之间添加一个空格以说明箭头。
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);
希望这会有所帮助:)
【讨论】：
我使用 CSS 解决了这个问题
.parentDiv div[class*="MuiTabs-scrollButtonsAuto"] {
display: none;
}
;其中 .parentDiv 是父 div 的类名。
2 个空框之一将包含类 MuiTabs-scrollButtonsAuto-nnn，反之亦然。
警告：这可能不适用于生产构建，因为 MUI 类将被缩短为类似 jss 的类名，即 .jss3001（不熟悉在构建过程中进行缩小的插件是什么）。我在生产版本中遇到了这个问题。
更新：以下是针对将类名缩小或转换为简写类名的构建版本的解决方法。基本上，选项卡夹在 2 个滚动箭头之间，其中一个在活动时是按钮类型。此解决方案将这些 div 定位为第一个和第三个孩子。可能不灵活，但无论如何您都会使用 1 个 MUI Tab 版本。这适用于开发和生产版本。
.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;
}
【讨论】：
TabScrollButton 组件负责显示箭头。您可以对其应用自定义样式。如果您只是隐藏箭头，则整个选项卡菜单都会跳转。我建议只减小箭头的宽度，这样间隙就不会那么宽。但是，如果您坚持完全隐藏它们，我们可以应用一些过渡并将非活动箭头的宽度减小到 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"
>
【讨论】：
我反复使用styled 的替代方法
const MyTabScrollButton = styled(TabScrollButton)({
'&.Mui-disabled': {
width: 0,
},
overflow: 'hidden',
transition: 'width 0.5s',
width: 28,
});
【讨论】：