Develop Reference

The material uI component is not showing in the bottum of the Grid

I am trying to create a page that contains a list of cards. I designed the Header of the page but as a beginner, but I created it in my own way.
Problem is that when I am trying to display the card in the new Grid container its will not showing the desired result.
Here the Image with the head I created
Here the I the problem picture when I try to put Grid container
My Style and Code :
import { AppBar, Avatar, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Grid, IconButton, makeStyles, Toolbar, Typography } from '#material-ui/core';
import React from 'react';
import MenuIcon from '#material-ui/icons/Menu';
import { Link } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
blackBox: {
backgroundColor: 'black',
height: '350px'
},
AppBar: {
'&.MuiAppBar-positionFixed': {
top: '60px',
right: '126px',
'#media (max-width: 576px)': {
right: '42px'
}
},
width: '85%',
},
large: {
width: theme.spacing(10),
height: theme.spacing(10),
},
link: {
color: 'white',
textDecoration: 'none',
marginLeft: '30px',
fontFamily: 'Times new roman'
},
headText: {
marginTop: '130px',
'#media (max-width: 576px)': {
marginTop: '170px',
}
},
title: {
color: 'white',
'#media (max-width: 576px)': {
fontSize: '30px'
}
},
titleDesc: {
color: 'white',
'#media (max-width: 576px)': {
width: '235px'
}
}
}))
export default function CoursesView() {
const classes = useStyles();
return (
<>
<Grid container
direction="column"
// justify="space-evenly"
alignItems="center"
className={classes.blackBox}
>
<Grid item >
<AppBar className={classes.AppBar} color='transparent'>
<Toolbar>
{/* <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<MenuIcon />
</IconButton> */}
<div style={{ flexGrow: '1' }}>
<Avatar alt="Remy Sharp" src="https://seeklogo.com/images/F/forex-logo-6B4D0AB43E-seeklogo.com.png" className={classes.large} />
</div>
<Link to='/play' className={classes.link}>Home</Link>
<Link to='/play' className={classes.link}>Courses</Link>
<Link to='/play' className={classes.link}>The Trade Signal</Link>
<Link to='/play' className={classes.link}>About</Link>
<Link to='/play' className={classes.link}>My Account</Link>
<Link to='/play' className={classes.link}>My Crat</Link>
</Toolbar>
</AppBar>
</Grid>
<Grid item container className={classes.headText} direction="column"
justify="center"
alignItems="center">
<Typography variant="h2" className={classes.title}>
Courses
</Typography>
<Typography variant="p" className={classes.titleDesc}>
our uniqly designed courses will help you in your specific areas of needs
</Typography>
</Grid>
</Grid>
<Grid container>
<h1>The cards wil display Here</h1>
</Grid>
</>
)
}
enter code here
The main app file that renders this app
import React from "react";
import CourseListView from "./components/pages/CourseListView";
import VideoPlayView from "./components/pages/VideoPlayView";
import { Route, Switch } from "react-router-dom";
import { makeStyles, ThemeProvider } from "#material-ui/core/styles";
import { createMuiTheme } from '#material-ui/core';
import CoursesView from "./components/pages/CoursesView";
const useStyles = makeStyles({
container: {
display: "flex"
}
});
const theme = createMuiTheme({
palette: {
primary: {
main: "#333996",
light: "#3c44b126"
},
secondary: {
main: "#f83245",
light: "#f8324526"
},
background: {
default: "#f4f5fd"
},
},
overrides: {
MuiAppBar: {
root: {
transform: 'translateZ(0)',
}
}
}
})
export default function App() {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<div className={classes.container}>
<Switch>
<Route exact from="/" render={props => <CourseListView {...props} />} />
<Route exact from="/play" render={props => <VideoPlayView {...props} />} />
<Route exact from="/Home" render={props => <CoursesView {...props} />} />
</Switch>
</div>
</ThemeProvider>
);
}

How to make a custom menu close when I click somewhere else other than the menu

To piggyback on a previous question, I'd like my menu to close whenever I click somewhere else other than the menu.
Currently, it will open/close when I click the "Hamburger Menu Button". It will close if I click a link on the menu or the menu itself but I'd also like to close when I "blur" away from it. This would be like if you got an alert message and you clicked somewhere else, the alert would close.
Here is the current CodeSandbox
The relevant code is in Header.tsx:
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
AppBar,
Container,
createStyles,
IconButton,
makeStyles,
Theme,
Toolbar,
Typography
} from "#material-ui/core";
import MenuIcon from "#material-ui/icons/Menu";
import clsx from "clsx";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
"& a": {
color: "white",
textDecoration: "none"
}
},
menuButton: {
marginRight: theme.spacing(2),
zIndex: 2
},
title: {
flexGrow: 1,
zIndex: 2
},
toolBar: {
"& div": {
transition: "left .1s"
}
},
menu: {
zIndex: 1,
width: 200,
height: "100%",
position: "fixed",
top: 48,
transition: "left .1s",
marginRight: theme.spacing(2),
left: -200,
background: "#3f51b5",
"& div:first-element": {
marginTop: 100
}
},
menuOpen: {
left: 0,
transition: "left .1s"
},
menuClose: {
left: -200,
transition: "left .1s"
},
topMenu: {
display: "flex",
"& div": {
marginLeft: theme.spacing(1)
}
}
})
);
const UserMenu = () => {
const classes = useStyles();
const [menuOpen, setMenuOpen] = useState(false);
const toggleMenu = () => setMenuOpen(!menuOpen);
const handleMenuClick = () => toggleMenu();
return (
<>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={toggleMenu}
>
<MenuIcon />
</IconButton>
<div className={classes.toolBar}>
<Container
className={clsx(classes.menu, {
[classes.menuOpen]: menuOpen,
[classes.menuClose]: !menuOpen,
[classes.toolBar]: true
})}
onClick={handleMenuClick}
>
<div>
<Link to="#">My Profile</Link>
</div>
<div>
<Link to="#">Account</Link>
</div>
<div>
<Link to="#">Admin</Link>
</div>
</Container>
</div>
</>
);
};
const Header: React.FC = ({ children }) => {
const classes = useStyles();
return (
<AppBar position="static" className={classes.root}>
<Toolbar variant="dense">
<UserMenu />
<Typography variant="h6" className={classes.title}>
<Link to="#">Widgets, LLC</Link>
</Typography>
<div className={classes.topMenu}>
<div>
<Link to="#">Sign out</Link>
</div>
<div>
<Link to="#">One more</Link>
</div>
</div>
</Toolbar>
</AppBar>
);
};
export default Header;
**Edit: ** This is the current Sandbox after applying Ryan's changes and moving the UserMenu into its own file.

You can use Material-UI's ClickAwayListener for this. The only tricky part is avoiding an immediate close of your menu after clicking on the button to open the menu (because of the click event being handled by the button opening the menu and then the same click event being handled by the ClickAwayListener closing the menu). Typically you would want to avoid rendering the ClickAwayListener until the menu is open, but I think that might break the transition on the menu unless you did further changes. My example addresses this problem by calling event.stopPropagation() in the click handler for the menu button (handleOpen).
Here's a modified version of your code/sandbox demonstrating this:
import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
AppBar,
Container,
ClickAwayListener,
createStyles,
IconButton,
makeStyles,
Theme,
Toolbar,
Typography
} from "#material-ui/core";
import MenuIcon from "#material-ui/icons/Menu";
import clsx from "clsx";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1,
"& a": {
color: "white",
textDecoration: "none"
}
},
menuButton: {
marginRight: theme.spacing(2),
zIndex: 2
},
title: {
flexGrow: 1,
zIndex: 2
},
toolBar: {
"& div": {
transition: "left .1s"
}
},
menu: {
zIndex: 1,
width: 200,
height: "100%",
position: "fixed",
top: 48,
transition: "left .1s",
marginRight: theme.spacing(2),
left: -200,
background: "#3f51b5",
"& div:first-element": {
marginTop: 100
}
},
menuOpen: {
left: 0,
transition: "left .1s"
},
menuClose: {
left: -200,
transition: "left .1s"
},
topMenu: {
display: "flex",
"& div": {
marginLeft: theme.spacing(1)
}
}
})
);
const UserMenu = () => {
const classes = useStyles();
const [menuOpen, setMenuOpen] = useState(false);
const handleOpen = (event: React.MouseEvent) => {
if (!menuOpen) {
event.stopPropagation();
setMenuOpen(true);
}
};
const handleClose = (event: React.MouseEvent<any, MouseEvent>) => {
if (menuOpen) {
setMenuOpen(false);
}
};
return (
<>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
onClick={handleOpen}
>
<MenuIcon />
</IconButton>
<div className={classes.toolBar}>
<ClickAwayListener onClickAway={handleClose}>
<Container
className={clsx(classes.menu, {
[classes.menuOpen]: menuOpen,
[classes.menuClose]: !menuOpen,
[classes.toolBar]: true
})}
onClick={handleClose}
>
<div>
<Link to="#">My Profile</Link>
</div>
<div>
<Link to="#">Account</Link>
</div>
<div>
<Link to="#">Admin</Link>
</div>
</Container>
</ClickAwayListener>
</div>
</>
);
};
const Header: React.FC = ({ children }) => {
const classes = useStyles();
return (
<AppBar position="static" className={classes.root}>
<Toolbar variant="dense">
<UserMenu />
<Typography variant="h6" className={classes.title}>
<Link to="#">Widgets, LLC</Link>
</Typography>
<div className={classes.topMenu}>
<div>
<Link to="#">Sign out</Link>
</div>
<div>
<Link to="#">One more</Link>
</div>
</div>
</Toolbar>
</AppBar>
);
};
export default Header;

Certain components show fail to show up on screen and inspect element isn't helping

I'm trying to design a UI that looks like this
So far what I have is this
The problem I'm having is getting the info icon to show up where it's supposed to be and getting the direct text and create icon on the top left corner. I also can't have the primary and general show up in my UI like Instagrams and the scrollbar on my drawer goes all the way up instead of stopping where the appbar is.
Here's my code
import React from "react";
import { makeStyles, withStyles } from "#material-ui/core/styles";
import Drawer from "#material-ui/core/Drawer";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import List from "#material-ui/core/List";
import Typography from "#material-ui/core/Typography";
import Divider from "#material-ui/core/Divider";
import ListItem from "#material-ui/core/ListItem";
import ListItemText from "#material-ui/core/ListItemText";
import Avatar from "#material-ui/core/Avatar";
import PersonIcon from "#material-ui/icons/Person";
import Badge from "#material-ui/core/Badge";
import InfoIcon from "#material-ui/icons/Info";
import ListItemAvatar from "#material-ui/core/ListItemAvatar";
import { connect } from "react-redux";
function mapStateToProps(state) {
return {};
}
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
backgroundColor: "#fff",
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3),
},
}));
const SmallAvatar = withStyles((theme) => ({
root: {
width: 11,
height: 11,
color: "green",
backgroundColor: "green",
},
}))(Avatar);
const Messaging = () => {
const classes = useStyles();
const dummy = "Active now";
return (
<div className={classes.root}>
<AppBar position='fixed' className={classes.appBar}>
<Toolbar style={{ width: "100%" }}>
<Avatar>
<PersonIcon />
</Avatar>
<Typography variant='h6'>adib.akm</Typography>
<InfoIcon />
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant='permanent'
classes={{
paper: classes.drawerPaper,
}}
anchor='left'>
<div className={classes.toolbar} />
<Divider />
<List>
<ListItem>
<ListItemAvatar>
<Badge
overlap='circle'
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
badgeContent={<SmallAvatar />}>
<Avatar>
<PersonIcon />
</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText primary='Photos' secondary={dummy} />
</ListItem>
<ListItem>
<ListItemAvatar>
<Badge
overlap='circle'
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
badgeContent={<SmallAvatar />}>
<Avatar>
<PersonIcon />
</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText primary='Work' secondary={dummy} />
</ListItem>
<ListItem>
<ListItemAvatar>
<Badge
overlap='circle'
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
badgeContent={<SmallAvatar />}>
<Avatar>
<PersonIcon />
</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText primary='Vacation' secondary={dummy} />
</ListItem>
</List>
</Drawer>
</div>
);
};
export default connect(mapStateToProps)(Messaging);
This is the codesandbox https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js

Trying to get a basic search bar up on my first react site

I am trying to get my first react site up -- eventually it will be a parametric search of a product database, but for now I'm trying to just get a simple search bar up. I am running into an error I don't understand.
I think I am nesting the styles incorrectly somehow, but I'm not sure how to resolve it.
My code:
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import logo from './logo.svg';
import './App.css';
import InputBase from '#material-ui/core/InputBase';
import SearchIcon from '#material-ui/icons/Search';
const useStyles = makeStyles(theme => ({
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}
}),
export default function SearchAppBar() {
const classes = useStyles();
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
<RaisedButton label="Material UI" />
</div>
</MuiThemeProvider>
);
}
}
export default App;
I get this error in the console when I run npm start.
Line 39:1: Parsing error: Unexpected token
37 | }),
38 |
> 39 | export default function SearchAppBar() {
| ^
40 | const classes = useStyles();
41 |
42 | class App extends Component {

Line 37 I saw '}),' just use '}),' or '});'

Because you have not closed your statement so just change }), to }));

You have not closed makeStyles function
const useStyles = makeStyles(theme => ({
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}
}));
Try this

Apart from missing the close bracket as suggested by another user above, it seems you're trying to have two default exports (which i also got an error from), but only one is allowed per module.
How about the following? Passing down classes as props to the App component. The only error I have now is due to me not having installed material-ui.
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton'; // add
import logo from './logo.svg';
import './App.css';
import { makeStyles } from '#material-ui/core/styles';
import InputBase from '#material-ui/core/InputBase';
import SearchIcon from '#material-ui/icons/Search';
const useStyles = makeStyles(theme => ({
search: {
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}
}));
export function SearchAppBar() {
const classes = useStyles();
return (
<App classes={classes} />
)
}
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className={this.props.classes.search}>
<div className={this.props.classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: this.props.classes.inputRoot,
input: this.props.classes.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
<RaisedButton label="Material UI" />
</div>
</MuiThemeProvider>
);
}
}
export default App;

Material-UI styles: convert functional component to class component

So I try the following code to convert a functional component to the classical component, it kinda worked, no error but styles are not applied.
import { makeStyles } from '#material-ui/core/styles';
import { withStyles } from '#material-ui/core/styles';
const playtheMusic = () => {
pauseMusic();
};
const pausetheMusic = () => {
pauseMusic();
};
const useStyles = makeStyles(theme => ({
text: {
padding: 50
},
paper: {
paddingBottom: 50
},
list: {
marginBottom: theme.spacing(2)
},
subheader: {
backgroundColor: theme.palette.background.paper
},
appBar: {
top: 'auto',
bottom: 0,
backgroundColor: '#282828',
padding: '15px'
},
grow: {
flexGrow: 1
}
}));
class BottomAppBar extends React.Component {
// const classes = useStyles();
render() {
const { classes } = this.props;
return (
<div>
<AppBar position="fixed" className={classes.appBar}>
<div style={{ display: 'flex', alignItems: 'center', alignContent: 'center' }}>
<div>
<Typography style={{ fontSize: 15 }}> Stress Out </Typography>
<br />
<Typography style={{ fontSize: 12, color: '#B3B3B3' }}>
Twenty One Pilots
</Typography>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<ShuffleIcon />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipPreviousRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton onClick={pausetheMusic} style={{ color: 'white' }}>
<PauseCircleOutlineRoundedIcon style={{ fontSize: 46 }} />
<PlayCircleOutlineIcon style={{ fontSize: 46, display: 'none' }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<SkipNextRoundedIcon style={{ fontSize: 30 }} />
</IconButton>
<IconButton style={{ color: 'white' }}>
<RepeatIcon />
</IconButton>
</div>
<div className={classes.grow} />
<div>
<IconButton style={{ color: 'white' }}>
<VolumeUpIcon />
</IconButton>
</div>
</div>
</AppBar>
</div>
);
}
}
export default withStyles(useStyles)(BottomAppBar);
also, there is a problem with StackOverflow. it says "It looks like your post is mostly code; please add some more details". that's the reason I'm writing some unnecessary things XD
you can skip it.
Thanks for reading. have a good day <3

A common approach for material-ui component styling:
Classical
withStyles (High order function) + createStyles
Functional
useStyles (hooks) + makeStyles
In your code, you shall not use the hooks useStyles inside withStyle, hooks shouldn't be used inside any classical component,
Wrong here
export default withStyles(useStyles)(BottomAppBar);
Right example
import { withStyles, createStyles } from "#material-ui/core/styles";
const styles = theme => createStyles({
root: {
},
// ...
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);
Online sample for both classical component and functional component styling