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;
I am using Material UI components in my project. OnClick is not working for button. I have search on google also but didn't find any solution. I have tried using div also but that is also not working.
import React from 'react';
import { makeStyles } 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 MobileDrawer from "./MobileDrawer";
import MenuIcon from '#material-ui/icons/Menu';
import IconButton from "#material-ui/core/IconButton";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
marginLeft: "20px",
marginTop: "8px"
},
}));
export default function MobileHeader() {
const classes = useStyles();
const handleDrawerStatus = () => {
alert("hi")
}
return (
<div className={classes.root}>
<AppBar position="static" style={{ backgroundColor: "#040b2d" }}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerStatus}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
So i'm still finding my feet with reactjs.net + asp.net core. I've imported latest version (v1) of material-ui.com into the mix. I am trying to combine the two but having issues with classes/props composition.
The code below is verbatim of what i've been told i need and found via hours of searching online. Yet, this.props.classes continue to throw undefined errors.
Is there a step i'm missing?
import React, { Component } 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 homeStyles = {
root: {
height: 200 ,
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
export class Home extends React.Component {
displayName = Home.name
constructor(props) {
super(props);
console.log("Props: " + props != null);
}
render() {
const { classes } = this.props;
return (
<div>
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton style={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" style={classes.grow}>Undefined? {(this.props == undefined).toString()}</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
</div>
);
}
}
Home.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(homeStyles)(Home)
I'm trying to invoke the function ButtonAppBar inside my stateless component but the TS compiler gives me this error: '{' expected. I'm not sure whether I should be passing it to my New Header component or whether I should give it a type.
Here's my component
import * as React from "react";
import { withStyles, createStyles } 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: any = createStyles({
root: {
flexGrow: 1
},
header: {
backgroundColor: "#007"
},
grow: {
flexGrow: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
}
});
const ButtonAppBar = (styles) => {
const classes = styles;
return (
<div className={classes.root}>
<AppBar position="static" className={classes.header}>
<Toolbar>
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
>
<MenuIcon />
</IconButton>
<Button color="inherit">Home</Button>
<Button color="inherit">Help</Button>
</Toolbar>
</AppBar>
</div>
);
}
const NewHeader: React.StatelessComponent<props> = ({}) => {
return (
{ButtonAppBar()}
);
}
export default withStyles(styles, NewHeader);
Your code is not parsed properly.
const NewHeader: React.StatelessComponent<props> = ({}) => ButtonAppBar();
either:
const NewHeader: React.StatelessComponent<props> = ({}) => {
return ButtonAppBar();
}
react-router changes the link but the page does not change. When go to the address from URL it works but doesn't work when clicking button
ZWrapper.jsx
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import ZWrapperAppBar from 'app/components/Wrapper/ZWrapperAppBar';
import ZWrapperDrawer from 'app/components/Wrapper/ZWrapperDrawer';
const styleSheet = createStyleSheet('Main', {
root: {
width: '100%',
flexGrow: 1,
align: 'center',
direction: 'row'
},
flex: {
align: 'center',
direction: 'row',
justify: 'flex-end',
},
mainDrawer:{
position: 'relative',
width: 500
},
mainDrawerContent:{
height: '100%'
},
mainDrawerBottomNav:{
position: 'absolute',
bottom: 0
},
typeContainer:{
margin: 0
}
});
export class ZWrapper extends React.Component{
PropTypes = {
classes: PropTypes.object.isRequired,
};
render(){
return(
<div className={styleSheet.root}>
<ZWrapperAppBar classes={styleSheet} />
<ZWrapperDrawer classes={styleSheet} />
{this.props.children}
</div>
)
}
}
// export default withStyles(styleSheet)(ZWrapper);
export default connect((state)=>{
return { drawerOpen: state.mainContainerDrawerOpen }
})(ZWrapper);
ZWrapperAppBar.jsx
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import { AppBar, Toolbar, Typography, IconButton, Grid, Button } from 'material-ui';
import { lightGreen, green } from 'material-ui/colors';
import MenuIcon from 'material-ui-icons/Menu';
import LinkButton from 'app/components/material-ui-addons/LinkButton';
import {toggleOpenDrawer} from 'actions';
export class ZWrapperAppBar extends React.Component{
PropTypes = {
classes: PropTypes.object.isRequired,
};
render(){
var {dispatch, drawerOpen, classes} = this.props;
return(
<AppBar position="absolute" >
<Toolbar style={{backgroundColor: green.A400}} className={classes.mainAppBar}>
<IconButton color="contrast" aria-label="Menu" onClick={()=>{dispatch(toggleOpenDrawer())}}>
<MenuIcon />
</IconButton>
<Typography color="inherit" type="title">
Recipea
</Typography>
<Grid container className={classes.flex} align="center" direction="row" justify="flex-end" gutter={Number("8")}>
<Button component={Link} color="contrast" to="/Account/Login" >{'Get Started'}</Button>
</Grid>
</Toolbar>
</AppBar>
)
}
}
export default connect((state)=>{
return { drawerOpen: state.mainContainerDrawerOpen }
})(ZWrapperAppBar);
ZWrapperDrawer
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withStyles, createStyleSheet } from 'material-ui/styles';
import { AppBar, Toolbar, Typography, Button, IconButton, Grid, Drawer, Divider } from 'material-ui';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation';
import { lightGreen, green, grey } from 'material-ui/colors';
import CloseIcon from 'material-ui-icons/Close';
import SettingsIcon from 'material-ui-icons/Settings';
import FavoriteIcon from 'material-ui-icons/Favorite';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import ListItemWithLink from 'app/components/material-ui-addons/ListItemWithLink';
import {toggleOpenDrawer} from 'actions';
export class ZWrapperDrawer extends React.Component{
PropTypes = {
classes: PropTypes.object.isRequired,
};
render(){
var {dispatch, drawerOpen, classes} = this.props;
return(
<Drawer docked={false} open={drawerOpen} onRequestClose={()=>{dispatch(toggleOpenDrawer())}} className={classes.mainDrawer}>
<AppBar position="static" className={classes.mainAppBar}>
<Toolbar style={{backgroundColor: green.A400}}>
<Link to="/">
<Button>
<Typography type="title" style={{color: grey[50]}}>Recipea</Typography>
</Button>
</Link>
<Grid container className={classes.flex} align="center" direction="row" justify="flex-end" gutter={Number("8")}>
<IconButton color="contrast" aria-label="Menu" onClick={()=>{dispatch(toggleOpenDrawer())}}>
<CloseIcon />
</IconButton>
</Grid>
</Toolbar>
</AppBar>
<ListItem button>
<ListItemText primary="About" />
</ListItem>
<ListItemWithLink to="/About/Us" label="Us" />
<ListItemWithLink to="/About/OurHelper" label="Used Dependencies"/>
<BottomNavigation className={classes.mainDrawerBottomNav} showLabels>
<BottomNavigationButton label="Settings" icon={<SettingsIcon />} />
<BottomNavigationButton label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationButton label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Drawer>
)
}
}
export default connect((state)=>{
return {
drawerOpen: state.mainContainerDrawerOpen
}
})(ZWrapperDrawer);
My Router
import React from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import MainPage from 'MainPage';
import ZWrapper from 'ZWrapper';
import AccountSignUp from 'AccountSignUp';
export default(
<Router>
<ZWrapper>
<Switch>
<Route exact path='/' component={MainPage}/>
<Route exact path='/Account/SignUp' component={AccountSignUp}/>
</Switch>
</ZWrapper>
</Router>
)
app.jsx
//Modules
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
// import 'typeface-roboto';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import injectTapEventPlugin from 'react-tap-event-plugin';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
import Router from 'app/router/';
import {configure} from 'configureStore';
var store = configure();
//App CSS
require('applicationStyles');
//App JS
require('myJS/all.jsx');
// override material-ui theme
const theme = createMuiTheme({
overrides:{
MuiGrid:{
'gutter-xs-8':{
margin: '0 -8px'
},
'gutter-xs-16':{
margin: '0 -8px'
},
'gutter-xs-24':{
margin: '0 -8px'
},
'gutter-xs-40':{
margin: '0 -8px'
},
},
},
})
//render
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider theme={theme}>
{Router}
</MuiThemeProvider>
</Provider>,
document.getElementById('app')
);
Material-UI: v1-alpha
React: 15.5.4
React-router-dom: 4.1.1
Browser: chrome (59.0.3071.115)
Add change the folowing code to add withRouter to from react-router-dom and change the export default to solve this issue
import { Link, NavLink, withRouter } from 'react-router-dom';
export default withRouter(
connect((state)=>{
return { drawerOpen: state.mainContainerDrawerOpen }
})(ZWrapperDrawer)
);