CODEWITHSUNDEEP
reactjsmaterial-ui
user14872626
user14872626

Reputation:

How to reduce Material Toolbar height Material-UI?

I want to change(reduce) the default height of the toolbar from Material-UI

I already referred How do I change the Material UI Toolbar height? still I'm facing the problem

The thing is when I am increasing beyond like 50 , I can see changes. But when I want to decrease the height I am unable to.

How can I achieve this?

My Code :

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  minHeight: {
    minHeight: "20px !important",
  },
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar
          className={toolbarSt.minHeight}
          classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
        >
          <Typography> Home </Typography> 
          <Typography> About </Typography> 
        </Toolbar>
      </AppBar>
    </>
  );
};

Upvotes: 0

Views: 2280

Answers (3)

hem charan
hem charan

Reputation: 126

just put sx={{ height : '70px }} in appbar for some reason it is not working in toolbar but works on appbar

return (
    <AppBar position="static" sx={{ height: '70px' }} >
      <Container >
        <Toolbar disableGutters >
        </Toolbar>
      </Container>
    </AppBar>
  );
};

Upvotes: 0

Bhala Hariharan
Bhala Hariharan

Reputation: 296

You should set the minHeight property to the root element

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    minHeight: "20px"
  }
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar classes={{ root: toolbarSt.root }}>
          <Typography> Home </Typography>
          <Typography> About </Typography>
        </Toolbar>
      </AppBar>
    </>
  );
};

Please refer to the docs for more information https://material-ui.com/api/toolbar/#toolbar-api

Upvotes: 1

antoineso
antoineso

Reputation: 2151

This is due to the font size of <Typography> Home </Typography> and <Typography> About </Typography>
for exemple if you add style class to both Typography like this:

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  minHeight: {
    minHeight: "5px !important",
  },
smallTypo:{
fontSize:"5px"
}
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar
          className={toolbarSt.minHeight}
          classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
        >
          <Typography className={toolbarSt.smallTypo}> Home </Typography> 
          <Typography className={toolbarSt.smallTypo}> About </Typography> 
        </Toolbar>
      </AppBar>
    </>
  );
};

you can make a really small AppBar. here a codeSandeBox

Upvotes: 1

Related Questions