App Bar not filling the top of the page MUI MATERIAL - reactjs

I am using MUI MATERIAL.
I got an
It has a padding on the top,right,left of the page.
I want the App Bar to be at the very top of the page.
I tried using classes but it does not work.
components/AppBar/index.js
import * as React from "react";
import AppBar from "#mui/material/AppBar";
import Box from "#mui/material/Box";
import Toolbar from "#mui/material/Toolbar";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import IconButton from "#mui/material/IconButton";
import MenuIcon from "#mui/icons-material/Menu";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles({
root: {
backgroundColor: "#130f40",
margin: 0
}
});
export default function ButtonAppBar() {
const classes = useStyles();
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" className={classes.root}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}

You can add CssBaseline at the top level of your app to get rid of the space around the AppBar component. It will apply style rules from normalize.css which includes margin:0 on the body element which is the reason for this gap.
import * as React from 'react';
import CssBaseline from '#mui/material/CssBaseline';
export default function MyApp() {
return (
<React.Fragment>
<CssBaseline />
{/* The rest of your application */}
</React.Fragment>
);
}

Related

Material-UI v5: makeStyles's not being imported

When I am trying to import "makeStyles" using :
import { makeStyles } from '#mui/styles';
it's not working. The page becomes blank when I run.
But It's working when I change the code and use V4:
import { makeStyles } from "#material-ui/core/styles";
I've installed alll the dependencies that is required. Why It's not working using V5 of material-ui?
Here is my code (styles.js):
import { makeStyles } from "#mui/material";
export default makeStyles((theme) => ({
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
}));
Header.jsx:
import React from "react";
import { AppBar, Toolbar, Typography, InputBase, Box } from "#mui/material";
import SearchIcon from "#mui/icons-material/Search";
import useStyles from "./styles";
const Header = () => {
const classes = useStyles();
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h5" className={classes.title}>
Travel Advsior
</Typography>
<Box display="flex">
<Typography variant="h6" className={classes.title}>
Explore new places
</Typography>
<div>
<div>
<SearchIcon />
</div>
<InputBase placeholder="Search..." />
</div>
</Box>
</Toolbar>
</AppBar>
);
};
export default Header;

TypeError: Cannot read properties of undefined (reading 'up') MUI

In my Header component my custom styling are coming from style.js where I've used makeStyles from #mui/styles. But In there while setting up the [theme.breakpoints.up("sm")] I'm getting the error above. I tried wrapping the index.js with themeProvider and passed createTheme as prop. but it is giving me another error. I tried looking up the docs but couldn't figure it out.
styles.js
import { makeStyles } from "#mui/styles";
import { alpha } from "#mui/material/styles";
export default makeStyles((theme) => ({
title: {
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
...
})
)
Header component
import React from "react";
import useStyles from "./styles";
import { AppBar, Toolbar, Typography, InputBase, Box } from "#mui/material";
import { Autocomplete } from "#react-google-maps/api";
import { SearchIcon } from "#mui/icons-material/Search";
const Header = () => {
const classes = useStyles();
return (
<AppBar position="static">
<Toolbar className={classes.toolbar}>
<Typography variant="h5" className={classes.title}>
Travel Companion
</Typography>
<Box display="flex">
<Typography variant="h6" className={classes.title}>
Explore new places
</Typography>
<Autocomplete>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
classes={{ root: classes.inputRoot, input: classes.inputInput }}
placeholder="Search"
/>
</div>
</Autocomplete>
</Box>
</Toolbar>
</AppBar>
);
};
export default Header;

Browser is not showing me Output

It's not showing slider and even the png that I have on the folder
please help as it very important m building my portfolio website
import React from "react";
import MenuIcon from "#material-ui/icons/Menu";
import { makeStyles } from "#material-ui/core/styles";
import {
AppBar,
Toolbar,
ListItem,
IconButton,
ListItemText,
Divider,
Avatar,
List,
Typography,
Box,
} from "#material-ui/core";
import {
ArrowBack,
AssignmentInd,
Home,
Apps,
ContactMail,
} from "#material-ui/icons";
import avatar from "../images/ava.png";
// CSS styles
const useStyles = makeStyles({
menuSliderContainer: {
width: 250,
background: "#000000",
height: "30rem",
},
});
const Navbar = () => {
const classes = useStyles;
return (
<>
<Box className={classes.menuSliderContainer} component="div">
<Avatar src={avatar} alt="Cyril Lawrence" />
</Box>
<Box component="nav">
<AppBar style={{ background: "#000000" }}>
<Toolbar>
<IconButton>
<MenuIcon style={{ color: "White" }} />
</IconButton>
<Typography variant="h6" style={{ padding: "0px 0px 0px 10px" }}>
Home
</Typography>
</Toolbar>
</AppBar>
</Box>
</>
);
};
export default Navbar;
Are you sure your path to your image is correct? I would also change all of your material ui imports to be like your MenuIcon import. It is best practice to import your MUI components this way to reduce bundle size. Example import Appbar from '#material-ui/core/Appbar'; This is because when you import like import { Button, TextField } from '#material-ui/core'; you are importing the entire MUI library, even though you are only using a few components. As your application grows you may start to notice load times starting to drag. You may read more about bundle size in the official documentation here https://material-ui.com/guides/minimizing-bundle-size/ You are also not initializing your useStyles function. Change to const classes = useStyles();

MaterialUI card view not showing

I am adding a card view in my webpage. But the contents in the card gets loaded in the normal view instead of card view.
Here's the Sample code i tried:
import React, { Component } from "react";
import MuiThemeProvider from "#material-ui/core/styles/MuiThemeProvider";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import Card from "#material-ui/core/Card";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import { makeStyles } from "#material-ui/core/styles";
import CardActionArea from "#material-ui/core/CardActionArea";
class HomePage extends Component {
render() {
return (
<div>
<div className={{ flexGrow: 1 }}>
<AppBar style={{ background: "#0080ff" }} position="static">
<Toolbar>
<Typography
color="inherit"
variant="h4"
className={{ flexGrow: 1 }}
>
My Page
</Typography>
<Button color="inherit">Home</Button>
</Toolbar>
</AppBar>
</div>
<div>
<Card className={{ maxWidth: 345 }}>
<CardActionArea>
<CardMedia
className={{ height: 140 }}
image="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg"
title="My App"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Welcome to My APP
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Go to Login Page
</Button>
</CardActions>
</Card>
</div>
</div>
);
}
}
export default HomePage;
The contents get loaded but without the card view. I checked material ui website card in material ui website But I don't know where I am doing wrong. Help me with some solutions
This is the output page i got without card view:
try adding in card media the following prop.
component="img"
Add styles individually like making a styles objects.Not adding styles in classname.
What data is not loading in the card view? Please can you be elaborate!
I faced the same problem. It is resolved by wrapping the HomePage component within a Container
<Container>
<HomePage />
</Container>

How to autohide AppBar when scrolling using Reactjs Material-UI

How can I autohide my Reactjs <AppBar/> component when scrolling as shown in Fig.1?
Fig.1. <AppBar/> autohides when scrolling
I am using Material-UI and my code is as follows.
MyAppBar.js
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
You can use Slide in conjuction with useScrollTrigger
The gist here is, useScrollTrigger will (by default) return true when you scroll down and the window vertical scrollbar position hits a certain threshold (100 pixels from origin by default) - when you scroll back up it returns false. Hence, these are the reasons why we negate it on the in prop of Slide
export default function HideAppBar() {
const trigger = useScrollTrigger();
return (
<>
<Slide appear={false} direction="down" in={!trigger}>
<AppBar>
<Toolbar>
<Typography variant="h6">Scroll Down to Hide App Bar</Typography>
</Toolbar>
</AppBar>
</Slide>
...
</>
);
}
You can use the link I gave at the top of this answer pertaining to useScrollTrigger to customize the options such as threshold
Reference: https://material-ui.com/components/app-bar/#hide-app-bar

Resources