将Material-ui React组件居中于页脚元素中

我试图将材质UI简单的面包屑组件居中放置在页脚中,而不是保持对齐状态。我对此并不陌生,我觉得这应该很简单,但我不知道。我尝试将text-alignment属性设置为center,但这没有用。

function Footer() {

  return (
    <footer>
      <SimpleBreadCrumbs />
    </footer>
  );
}

export default Footer;

export default function SimpleBreadcrumbs() {
  let year = new Date().getFullYear();

  return (
    <Breadcrumbs className="breadcrumbs" aria-label="breadcrumb">
      <Link color="inherit" href="/" onClick={handleClick}>
        Material-UI
      </Link>
      <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
        Core
      </Link>
      <Typography color="textPrimary">Copyright © {year}</Typography>
    </Breadcrumbs>
  );
}

isAif

您可以使用flex将SimpleBreadCrumbs组件居中。

function Footer() {

  const style = {
    display: 'flex',
    justifyContent: 'center'
  };

  return (
    <footer style={style}>
      <SimpleBreadCrumbs />
    </footer>
  );
}

export default Footer;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将 Material-UI 网格组件居中

将 graphql 变量传递给 Material UI 组件

React Material UI Grid 页脚更改

Material UI中缺少组件

将Material-ui的`DropdownMenu`与React结合使用时出错

如何将 Material UI 与 Electron React Boilerplate 结合使用?

无法将Material UI Labs导入React应用

如何将Radio组与Material UI中的TextField对齐?

我无法使用样式化组件在Material-UI中居中放置Button组件

React中Material-UI中的可滚动列表组件

将material-ui中的<TextField />组件与react-hook-form一起使用会显示警告

将React Material-UI组件粘贴到屏幕的右下角

如何使用React Material UI的过渡组件来动画化将项目添加到列表?

Typescript / React:如何将ref添加到material-ui Box组件?

如何将所有 React 事件与 Material-UI 组件一起使用?

使用 React.js 和 Material-UI 将数据渲染为功能组件

在React中设置Material UI的TextField组件的defultValue

使用Material-UI从React中的组件增强

在表单中如何使用Material UI的React评分组件?

React onDragStart在Material UI Autocomplete组件中不触发

React + Material UI-使用样式覆盖组件中的MuiTheme

如何在 React Material UI 的 AppBar 组件中设置容器?

将material-ui封装到自定义组件中

如何将数据传递给 ReactJS 中的 Material UI 'Table' 组件

将子数组的属性映射到被映射的父数组的元素(React、Material-UI)

Bootstrap与Material UI for React?

React Material UI网格

React Material UI onFocusOut

React Material UI 滑块