How can i resolve this error in React+Material UI - reactjs

I'm getting the following error while tried to run the application in Mac and Ubuntu. But it runs without any errors in Windows platform. How can i resolve this. Is there any platform specific code in Material UI beta version(v1.0.0-beta.46). I have used the withStyles component, which is an higher order component of material ui.
Error:
/node_modules/material-ui/styles/withStyles.js
Module not found: Can't resolve '#babel/runtime/core-js/map'
The below is my code
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import Avatar from 'material-ui/Avatar';
import classNames from 'classnames';
import AppIcon from '../../assets/img/myAppIcon.png';
const styles = theme => ({
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
loginButton:{
alignContent: "flex-end"
},
avatar: {
margin: 10,
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing.unit * 3,
},
});
// Here is my functional component which renders the AppBar with login button at the right hand side.
function Layout(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar
position="absolute"
className={classNames(classes.appBar)}
>
<Toolbar>
<Avatar src={AppIcon} className={classes.avatar} />
<Typography variant="title" color="inherit" noWrap>
MyApp
</Typography>
<Typography variant="title" color="inherit" noWrap className={classes.flex} />
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.toolbar} />
{props.children}
</main>
</div>
);
}
Layout.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
//Here I'm getting an error on executing this
export default withStyles(styles, { withTheme: true })(Layout);

You Can use this, It will be working.
npm install #babel/runtime

Try the beta version
npm install #babel/runtime#7.0.0-beta.55

Related

ReactJS: TypeError: theme.spacing is not a function

I am building a 'ReactJS' application and came across the following error:
TypeError: theme.spacing is not a function
(anonymous function)
E:/Projects/PortfolioSite/React-Portfolio-Website/react-portfolio-website/src/components/Navbar.js:39
36 | avatar:{
37 | display: "block",
38 | margin: "0.5rem auto",
> 39 | width: theme.spacing(13),
40 | heght: theme.spacing(13)
41 | }
42 | }));
I have already imported makestyles from "#material-ui/styles". But it outputs the above error:
For your reference I would like to add the complete code I used:
import React from 'react';
import {makeStyles} from "#material-ui/styles";
import {
AppBar,
Toolbar,
ListItem,
ListItemIcon,
IconButton,
ListItemText,
Avatar,
Divider,
List,
Typography,
Box
} from "#material-ui/core";
import {
ArrowBack,
AssignmentInd,
Home,
Apps,
ContactMail
} from "#material-ui/icons";
import avatar from "../Assets/Images/avatar.png";
//CSS styles
const useStyles = makeStyles( theme =>({
menuSliderContainer:{
width: 250,
background: "#511",
height: "30rem"
},
avatar:{
display: "block",
margin: "0.5rem auto",
width: theme.spacing(13),
heght: theme.spacing(13)
}
}));
const menuItems = [
{
listIcon: <Home/>,
listText: "Home"
},
{
listIcon: <AssignmentInd/>,
listText: "Resume"
},
{
listIcon: <Apps/>,
listText: "Portfolio"
},
{
listIcon: <ContactMail/>,
listText: "Contact"
},
{
listIcon: <Home/>,
listText: "Home"
}
]
const Navbar = () => {
const classes = useStyles()
return (
<>
<Box component="div" className={classes.menuSliderContainer}>
<Avatar src={avatar} className={classes.avatar} alt="Pawara Siriwardhane"/>
<Divider/>
<List>
{menuItems.map((lstItem,key)=>(
<ListItem button key={key}>
<ListItemIcon>
{lstItem.listIcon}
</ListItemIcon>
<ListItemText/>
</ListItem>
))}
</List>
</Box>
<Box component="nav">
<AppBar position="static" style={{background:"#222"}}>
<Toolbar>
<IconButton>
<ArrowBack style={{color: "tomato"}}/>
</IconButton>
<Typography variant="h5" style={{color:"tan"}}> Portfolio </Typography>
</Toolbar>
</AppBar>
</Box>
</>
)
}
export default Navbar
I have already gone through the
already asked questions: Why Material-UI is not recognizing the theme.spacing function?
& the GitHub conversation: [Grid] Use a unitless spacing API #14099
but could not find a working answer.
It happens because you don't have a material-ui theme defined on your application. Then apply the default material ui theme, or your own theme. It can be done in two ways:
Wrap your application with ThemeProvider component
Export makeStyles hook from #material-ui/core/styles instead of #material-ui/styles, in order to have the default theme.
I would like to add to previous answer pointing out that another reason for this error, once migrated from Material UI 4.xto Material 5.x and so respectively have the import from #mui/styles, assuming one has created a style object, is that indeed as in your code you are referring to the theme object that is not present anymore as default e.g:
import { makeStyles } from '#material-ui/core/styles';
export default makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8), // <-- this theme as isn't defined will
// cause the error
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: theme.spacing(1),
},
}
if you would like to use theme default propeties then change that style to
import { makeStyles } from '#mui/styles';
import { useTheme } from '#mui/material/styles';
export default makeStyles(() => ({
paper: {
marginTop: useTheme().spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: useTheme().spacing(2),
},
root: {
'& .MuiTextField-root': {
margin: useTheme().spacing(1),
},
},
According to the latest version of MUI, you should import makeStyles from #mui/styles.
Add a ThemeProvider at the root of your application since the defaultTheme is no longer available.
If you are using this utility together with #mui/material, it's recommended that you use the ThemeProvider component from #mui/material/styles

Underline shows when using materal-ui InputBase component

I'm using material-ui InputBase component to create a search bar and it shows an underline. However when I write the same code in another project there is no underline..
Any clues to what the problem might be?
Here is the code for the search bar
import React from 'react';
import { IconButton, InputBase, Paper } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles'
import SearchIcon from '#material-ui/icons/Search'
const useStyles = makeStyles((theme) => ({
root: {
padding: '2px 4px',
display: 'flex'
alignItems: 'center'
width: 400
},
input: {
marginLeft: theme.spacing(1),
flex: 1,
},
iconButton: {
padding: 10
}
}));
export default function SearchBar() {
const classes = useStyles();
return (
<Paper className={classes.root}>
<InputBase
className{classes.input}
placeholder='Search..'
inputProps={{ 'aria-label': 'search' }}
/>
<IconButton
type='submit'
className={classes.iconButton}
aria-label='search'
>
<SearchIcon />
</IconButton>
</Paper>
)
}

What is the proper way of using the styling defined inside createMuiTheme alongside with Material-UI's useStyles?

import React from 'react';
import Component from './components/Component';
import { createMuiTheme, makeStyles, ThemeProvider } from '#material-ui/core/styles';;
const theme = createMuiTheme({
container: {
width: '100%',
paddingRight: '15px',
paddingLeft: '15px',
marginRight: 'auto',
marginLeft: 'auto'
},
flexColumn: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<Component />
</div>
</ThemeProvider>
);
}
export default App;
The theme provided above goes inside the component Component.
import React, { useState } from "react";
import { makeStyles } from '#material-ui/core/styles';
import { useTheme } from '#material-ui/core/styles';
import classNames from 'classnames';
const useStyles = makeStyles(() => ({
bar: {
flexGrow: 1,
padding: '.8rem .8rem',
lineHeight: '1.5em',
fontSize: '18px',
},
alert: {
color: 'white',
backgroundColor: 'red',
},
}));
export default function Component (props) {
const theme = useTheme();
const classes = useStyles();
const [focus, setFocus] = useState(false);
return (
<div>
<div style={theme.flexColumn} className={classNames(classes.alert, classes.bar)}>
<div>
</div>
</div>
</div>
);
}
Is this the proper way to use useTheme and className? The issue with this is that I can't use the styles defined with createMuiTheme and fetched through the ThemeProvider inside the className attribute, which means sometimes the styling inside classNames and style may conflict with one another. I couldn't find an example where the styling provided inside createMuiTheme is used with className.
If you want to reuse classes in MUI, you should create an external style file, then import this file into the components that you want to use this style. Try this:
In sharedStyles:
export const layout = {
header: {
fontSize: "1.5em",
color: "blue"
},
footer: {
fontSize: "0.8em"
}
};
const sharedStyles = theme => ({
grow: {
flexGrow: 1
},
defaultPadding: {
padding: theme.spacing.unit * 3 + "px"
},
"layout.header": layout.header
});
export default sharedStyles;
In a component:
import React from "react";
import { withStyles } from "#material-ui/core/styles";
import Paper from "#material-ui/core/Paper";
import sharedStyles, { layout } from "./sharedStyles";
import Typography from "#material-ui/core/Typography";
function Dashboard(props) {
const { classes } = props;
return (
<Paper className={classes.defaultPadding}>
<Typography variant="body1" gutterBottom>
Hello <span className={classes.someOtherStyle}>World</span>
</Typography>
<Typography
component="h2"
variant="h1"
gutterBottom
className={classes["layout.header"]}
>
Heading
</Typography>
<Typography
component="h2"
variant="h1"
gutterBottom
className={classes.header}
>
Heading 2
</Typography>
</Paper>
);
}
const styles = theme => ({
...sharedStyles(theme),
header: layout.header,
someOtherStyle: {
color: "red"
}
});
export default withStyles(styles)(Dashboard);

In App Bar with buttons material-ui / core ': v3.9.1 cropping backgroundImage

In App Bar with buttons material-ui / core ': v3.9.1 cropping backgroundImage.
In App Bar with buttons material-ui / core ': v3.0.3 everything worked well
Why? What can be scratched to work as in v3.0.3.
My code:
//https://material-ui.com/api/app-bar/ (App Bar with buttons)
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 { Link } from "react-router-dom";
import MenuIcon from "#material-ui/icons/Menu";
import logoRa from "../assets/images/all/SunRa48.png";
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
logo: {
backgroundImage: `url(${logoRa})`,
backgroundSize: 45,
backgroundPosition: "2px 2px",
backgroundRepeat: "no-repeat",
borderRadius: "0%",
marginRight: 10,
},
};
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>
<IconButton className={classes.logo} component={Link} to="/aboutme" title="AboutMe" aria-label="logo" />
<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);
Prior to version 3.1.0, IconButton had an explicit width and height of 48px.
In version 3.1.0, these were removed in order to support more flexible sizing of IconButton. Since you are doing your logo as a background image, the size collapsed down.
You can recover the old behavior by adding the width and height into your logo class:
logo: {
backgroundImage: `url(${logoRa})`,
backgroundSize: 45,
backgroundPosition: "2px 2px",
backgroundRepeat: "no-repeat",
borderRadius: "0%",
marginRight: 10,
width: 48, // added
height: 48 // added
}

Drawer not opening

Good evening. I have a problem that I think is simple to solve but I could not get it because I was just a beginner in react. The problem is that the drawer that I put in my appbar just does not open, and there is no error on the console about it, so I would like the help of you guys.
PS: sorry for the bad English, I'm Brazilian.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Toolbar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui-icons/Menu';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import '../assets/scss/main.scss';
import img from '../assets/images/react.png';
const styles = theme => ({
root: {
width: '100%',
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
inputProps: {
step: 300,
},
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
paper: {
padding: 50,
textAlign: 'center',
border: '5px solid black',
width: '100%',
},
paper1: {
backgroundColor: 'red',
marginTop: '13%',
},
img: {
width: '45%',
},
appbar: {
marginLeft: '-20.20%',
marginTop: '-20%',
width: '139.99%',
},
});
function ButtonAppBar(props) {
const { classes } = props;
const handleSubmit = (event) => {
event.preventDefault();
const data = {
email: document.getElementById('email').value,
password: document.getElementById('password').value,
};
console.log(data);
};
return (
<div className={styles.root}>
<Grid container spacing={8} alignItems="center" justify="center">
<Paper className={classes.paper}>
<div>
<AppBar position="static" className={classes.appbar}>
<Drawer />
<Toolbar>
<IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
<img src={img} alt="React" className={classes.img} /><br />
<form onSubmit={handleSubmit} noValidate>
<TextField id="email" type="email" label="Usuário" className={classes.user} /><br />
<TextField id="password" type="password" label="Senha" className={classes.senha} />
<div>
<AppBar position="static" className={classes.paper1} >
<Button type="submit" color="contrast">Login</Button>
</AppBar>
</div>
</form>
</Paper>
</Grid>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
Take a look at the Drawer demos in the documentation. You’ll see that the Drawer uses an open prop to specify whether it is open or not. In the demos, this is controlled my state.
The way this is usually handled is by using a button, like IconButton, in the AppBar with an onClick handler that issues a state change, resulting in a re-render.
The demos should help you reconfigure your app and get rolling. The most straightforward example of using component state to open and close the Drawer is the mobile portion of the Responsive Drawer demo.
It initializes state to false and renders the open prop using this.state.mobileOpen. The AppBar has an IconButton with handleDrawerToggle as it’s onClick handler, which changes state, causing the component to re-render.

Resources