[FIXED] How to aligh right a button in Material-UI?

Issue

I tried material ui and i cant figure out how to alight buttons to the right ((

import * as React from "react";
import SvgIcon from "@mui/material/SvgIcon";
import Button from "@mui/material/Button";
import { AppBar, IconButton, Toolbar, Typography } from "@mui/material";
import { Box, Container } from "@mui/system";
import MenuIcon from "@mui/icons-material/Menu";
import { makeStyles } from "@mui/material/styles";


const boxDefault = {};

function App() {
  //const classes = useStyles();
  return (
    <AppBar position="fixed">
      <Container fixed>
        <Toolbar>
          <IconButton
            Edge="start"
            color="inherit"
            aria-label="menu"
            //className={classes.menuButton}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h5" /*className={classes.title}*/>
            Hotels Ua
          </Typography>
          <Box mr={1}> 
            <Button color="inherit" variant="outlined">
              Log in
            </Button>
          </Box>
          <Box>
            <Button color="secondary" variant="contained">
              Sign up
            </Button> 
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}

export default App;

I found instruction how to aligh in material ui but after trying still no result....

  display="flex"
  justifyContent="flex-end"
  alignItems="flex-end"
  sx={boxDefault}

but no effect. I am just started with mui.

Solution

Assuming that the goal is to make the logo and title to the left, and the buttons to the right on the nav bar, change the title element like this:

<Typography variant="h5" sx={{ flexGrow: 1}}/>
Hotels Ua
</Typography>

This will make the title element grow in this layout, and push the buttons to the right, which hopefully is the intended result, but do specify if not as it will help to find the proper solution.

Answered By - John Li
Answer Checked By - - Marie Seifert (ReactFix Admin)