Css 反应材料：在应用程序栏中将单个选项卡水平对齐至右侧，将其他选项卡水平对齐至左侧->；选项卡->；标签

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

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>
    );
}

功能关联道具（索引）{
返回{
id:`nav tab-${index}`，
“aria控件”：“导航选项卡面板-${index}`
};
}
功能链接选项卡（道具）{
const history=useHistory（）；
const route=props.route；
控制台日志（道具）；
返回(
{
event.preventDefault（）；
历史。推送（路线）
}}
{…道具}
/>
);
}
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：theme.palete.background.paper，
高度：theme.navBarHeight
},
选项卡指示器：{
背景颜色：PRIMARY_RED.default
},
选项卡栏：{
顶部：“80px”
}
}));
导出默认函数NavTabs（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
);
}

现在，在这个设置中，我希望我的报告选项卡与应用程序栏的右侧对齐。我没有在文档中看到任何CSS规则或道具，这可以在这里帮助我

---

请建议如何在当前设置中实现这一点

您应该为

选项卡设置一个类，如下所示：


const useStyles=makeStyles（（主题）=>({
选项卡：{
“&：最后一个孩子”：{
位置：'绝对'，
右：“0”
}
}
}));
导出默认函数NavTabs（）{
...
返回(
)；
您应该为
选项卡设置一个类，如下所示：


const useStyles=makeStyles（（主题）=>({
选项卡：{
“&：最后一个孩子”：{
位置：'绝对'，
右：“0”
}
}
}));
导出默认函数NavTabs（）{
...
返回(
)
选项卡不提供将特定项与开始或结束对齐的属性。但您可以利用css来实现结果

向要右对齐的项添加类名，并在其上定义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>
    );
}

const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：theme.palete.background.paper，
高度：theme.navBarHeight
},
选项卡指示器：{
背景颜色：PRIMARY_RED.default
},
选项卡栏：{
顶部：“80px”
},
右对齐：{
marginLeft:'自动'，
}
}));
导出默认函数NavTabs（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
选项卡不提供将特定项与开始或结束对齐的属性。但您可以利用css来实现结果

向要右对齐的项添加类名，并在其上定义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>
    );
}

const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：theme.palete.background.paper，
高度：theme.navBarHeight
},
选项卡指示器：{
背景颜色：PRIMARY_RED.default
},
选项卡栏：{
顶部：“80px”
},
右对齐：{
marginLeft:'自动'，
}
}));
导出默认函数NavTabs（）{
const classes=useStyles（）；
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
这太完美了Shubham！！我在你的沙箱中做的唯一更改是：
并作为
{event.preventDefault（）；history.push（route）}className={props.label==PRIMARY_NAVIGATION.REPORT.label？props.alignment:“}{……props}”/>
虽然我期待从材料中得到内置的方式，但是像
居中的
这是完美的Shubham！！我在你的沙盒中做的唯一改变是：
并作为
{event.preventDefault（）；history.push（route）}类名接收={props.label==PRIMARY_NAVIGATION.REPORT.label？props.alignment:“}{…props}/>
虽然我希望材料中有内置的方式，比如
居中