如何使 MUI 面包屑中的文本居中

Question

我在我的代码中使用 MUI Breadcrumb。我想将内容放在面包屑中。我试试这个代码

<BreadcrumbStyle style={{marginTop:30}}>
  <Card elevation={3} style={{padding:10}}>
      <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="breadcrumb" >
        <Link underline="hover" color="inherit" href="/" sx={{ display: "flex", alignItems: "center" }} ><HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" /> Home  </Link>
        <Typography  >Projects </Typography>
        <Typography style={{color:"blue", fontWeight:"bold",}} noWrap >React JS Web Application</Typography>
      </Breadcrumbs>
     </Card>
</BreadcrumbStyle>

我想在面包屑中将内容居中。我需要预期的输出

Answer 1

在卡片标签中尝试 style={{textAlign:"center" }}。

Answer 2

内容是由 flex 容器 left-aligned，而不是 text-align。

您应该可以通过将此添加到面包屑组件来修复它：

<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
  sx={{
    "& ol": {
      justifyContent: "center",
      margin: "auto"
    }
  }}
>

如何使 MUI 面包屑中的文本居中

How to center the text in MUI Breadcrumbs

javascript

css

reactjs

material-ui