Javascript 如何在React material UI中居中选项卡面板？

我正在尝试创建一个文章列表，切换到React+material UI中的其他实体列表。但是我遇到了一些问题，即，我无法将

卡片

居中显示，这将以一种方式显示一篇文章，这将对应于居中的

选项卡

。所以，我得到了这样的结果：

谁能帮我使它看起来对称吗

我希望

卡

的居中方式与

选项卡

相同

TabsMenu.js

，它本身会显示：

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
从“@material ui/core/Box”导入框；
从“@material ui/core/Typography”导入排版；
从“道具类型”导入*作为道具类型；
从“/ArticlesList”导入ArticlesList；
功能选项卡面板（道具）{
const{children，value，index，…other}=props；
返回(
{value===索引&&(
{儿童}
)}
);
}
TabPanel.propTypes={
子项：PropTypes.node，
索引：PropTypes.any.isRequired，
值：PropTypes.any.isRequired，
};
const useStyles=makeStyles({
根目录：{
flexGrow:1，
},
选项卡面板：{
marginLeft：“自动”
}
});
功能a11yProps（索引）{
返回{
id:`simple tab-${index}`，
“aria控件”：“简单选项卡面板-${index}”，
};
}
导出默认功能中心选项卡（道具）{
const classes=useStyles（）；
const[value，setValue]=React.useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
}
返回(
项目二
项目三
);
}

ArticlesList.js

，用于

TabsMenu.js

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/List”导入列表；
从“/ArticleCard”导入ArticleCard；
从“@material ui/core/Box”导入框；
从“@material ui/core/Grid”导入网格；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
最大宽度：360，
背景色：theme.palete.background.paper，
},
}));
导出默认函数ArticlesList（道具）{
const classes=useStyles（）；
返回(
);
}

ArticleCard.js

从“React”导入React；
从'@material ui/core/colors'导入{red}；
从“@material ui/core/styles/makeStyles”导入makeStyles；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardHeader”导入CardHeader；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/CardActions”导入CardActions；
从“clsx”导入clsx；
从“@material ui/icons/Favorite”导入收藏夹图标；
从“@material ui/icons/Share”导入ShareIcon；
从“@物料界面/核心/按钮”导入按钮；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“155%”，
网格柱：“2/span 7”
},
媒体：{
高度:0,，
paddingTop:'56.25%'，
},
扩展：{
变换：“旋转（0度）”，
marginLeft:'自动'，
转换：theme.transitions.create（'transform'{
持续时间：theme.transitions.duration.shortest，
}),
},
化身：{
背景颜色：红色[500]，
},
}));
导出默认函数ArticleCard（道具）{
const classes=useStyles（）；
常量[扩展]=React.useState（false）；
const title=props.title；
const date=props.dateTime；
const imageSrc=props.imageSrc；
const imageAlt=props.imageAlt；
const previewText=props.text.substring（0158）+“…”；
返回(
{previewText}
阅读更多
);
}

这与材质ui无关， 您已经应用了marginLeft:auto，它不会应用marginRight:auto，因此它不会居中对齐

您应该添加marginRight:auto，并将其居中

const useStyles = makeStyles({
    root: {
        flexGrow: 1,
    },
    tabpanel: {

        marginLeft: "auto",
        marginRight: "auto"

    }
});

---

这与材料ui无关， 您已经应用了marginLeft:auto，它不会应用marginRight:auto，因此它不会居中对齐

您应该添加marginRight:auto，并将其居中

const useStyles = makeStyles({
    root: {
        flexGrow: 1,
    },
    tabpanel: {

        marginLeft: "auto",
        marginRight: "auto"

    }
});