css - Material ui 将元素置于移动设备、台式机、平板电脑的底部响应式

Question

我是布局设计的初学者，并且正在使用React和Material UI. 我需要将应用导航放在底部。问题是应用程序导航位于不同的位置，具体取决于移动屏幕分辨率。（iPhone X 和 iPhone 7）。如何放置它以使其在多个移动设备上以及可能在平板电脑和台式机上响应？

React 和 Material UI 代码：

const useStyles = makeStyles({
  divContainer: {
    display: 'flex',
    alignItems: 'flex-end',
    height: '99vh',
  },
  root: {},
});

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

  return (
    <Container className={classes.divContainer}>
      <BottomNavigation
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        showLabels
        className={classes.root}
      >
        <BottomNavigationAction label="Home" icon={<HomeRoundedIcon />} />
        <BottomNavigationAction label="Wishlist" icon={<FavoriteIcon />} />
        <BottomNavigationAction
          label="Add"
          icon={<AddCircleOutlineRoundedIcon />}
        />
        <BottomNavigationAction
          label="Notifications"
          icon={<NotificationsIcon />}
        />
        <BottomNavigationAction
          label="Profile"
          icon={<AccountCircleRoundedIcon />}
        />
      </BottomNavigation>
    </Container>
  );
}

标签： cssreactjsmaterial-ui

Answer 1

沙盒

在中创建root如下useStyle：

const useStyles = makeStyles({
  root: {
    position: "fixed",
    bottom: "0px",
    left: "0px",
    right: "0px",
    marginBottom: "0px",
    width: "100vw",
    backgroundColor: "red",
}
});

然后将其作为BottomNavigation组件的类名：

<BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      showLabels
      className={classes.root}
    >

然后，它将被放置在不同设备上的页面底部。