React-MaterialUI：在 App Bar -> Tabs -> Tab 中水平对齐单个选项卡向右对齐，其他选项卡向左对齐

Question

在我的 React 应用程序中，我有一个导航栏，其中有多个选项卡，这些选项卡是使用 Marerial UI 的 AppBar、选项卡和选项卡组件（按顺序）创建的，如下所示:

function associatedProps(index) {
    return {
        id: `nav-tab-${index}`,
        'aria-controls': `nav-tabpanel-${index}`
    };
}

function LinkTab(props) {
    const history = useHistory();
    const route = props.route;
    console.log(props);
    return (
        <>
        <Tab
            component="a"
            onClick={(event) => {
                event.preventDefault();
                history.push(route)
            }}
            {...props}
        />
        </>
    );
}

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        height: theme.navBarHeight
    },
    tabIndicator: {
        backgroundColor: PRIMARY_RED.default
    },
    tabBar: {
      top: '80px'
    }
}));

export default function NavTabs() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <div className={classes.root}>
            <AppBar position="fixed" className={classes.tabBar}>
                <Tabs
                    variant=""
                    classes={{indicator: classes.tabIndicator}}
                    value={value}
                    onChange={handleChange}
                    aria-label="nav tabs example"
                >
                    <LinkTab {...PRIMARY_NAVIGATION.MY_LIST} {...associatedProps(0)} />
                    <LinkTab {...PRIMARY_NAVIGATION.MY_REQUESTS} {...associatedProps(1)} />
                    <LinkTab {...PRIMARY_NAVIGATION.REPORT} {...associatedProps(2)} />
                </Tabs>
            </AppBar>
        </div>
    );
}

在此设置中，我希望我的 REPORT 选项卡与应用栏右侧对齐。我在文档中没有看到任何 CSS 规则或道具，这对我有帮助。

请建议我如何在当前设置中实现此目的。

Answer 1

您应该像这样为 Tabs 设置 class：

const useStyles = makeStyles((theme) => ({
    tabs: {
      '&:last-child': {
        position: 'absolute',
        right: '0'
      }
    }
}));

export default function NavTabs() {
    ...
    return (
        <div className={classes.root}>
            <AppBar position="fixed" className={classes.tabBar}>
                <Tabs
                    variant=""
                    classes={classes.tabs}
                    value={value}
                    onChange={handleChange}
                    aria-label="nav tabs example"
                >
                    <LinkTab {...PRIMARY_NAVIGATION.MY_LIST} {...associatedProps(0)} />
                    <LinkTab {...PRIMARY_NAVIGATION.MY_REQUESTS} {...associatedProps(1)} />
                    <LinkTab {...PRIMARY_NAVIGATION.REPORT} {...associatedProps(2)} />
                </Tabs>
            </AppBar>
        </div>
    );

Answer 2

标签不提供属性以将特定项目对齐到开头或结尾。但是您可以利用 css 来实现您的结果。

为要右对齐的项目添加一个className，并在其上定义一个marginLeft属性

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        height: theme.navBarHeight
    },
    tabIndicator: {
        backgroundColor: PRIMARY_RED.default
    },
    tabBar: {
      top: '80px'
    },
    rightAlign: {
       marginLeft: 'auto',
    }
}));

export default function NavTabs() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <div className={classes.root}>
            <AppBar position="fixed" className={classes.tabBar}>
                <Tabs
                    variant=""
                    classes={{indicator: classes.tabIndicator}}
                    value={value}
                    onChange={handleChange}
                    aria-label="nav tabs example"
                >
                    <LinkTab {...PRIMARY_NAVIGATION.MY_LIST} {...associatedProps(0)} />
                    <LinkTab {...PRIMARY_NAVIGATION.MY_REQUESTS} {...associatedProps(1)} />
                    <LinkTab {...PRIMARY_NAVIGATION.REPORT} {...associatedProps(2)} className={classes.rightAlign}/>
                </Tabs>
            </AppBar>
        </div>
    );
}

Sample working demo

React-MaterialUI：在 App Bar -> Tabs -> Tab 中水平对齐单个选项卡向右对齐，其他选项卡向左对齐

React-MaterialUI: Horizontally aligning single tab to right and others to left in App Bar ->Tabs -> Tab

css

reactjs

material-design

material-ui