I am facing an issue even though I have applied styling as per my requirements:
Warning: Failed prop type validation- Invalid prop
classeswith typefunctionpassed toWithStyles(App), expected typeobject.
This warning is originating from WithStyles component.
import React from "react";
import {
CssBaseline,
Theme,
createStyles,
Paper,
Typography,
withStyles,
WithStyles,
withTheme
} from "@material-ui/core";
const styles = (theme: Theme) =>
createStyles({
layout: {
width: "800",
marginLeft: theme.spacing(2),
marginRight: theme.spacing(2),
[theme.breakpoints.up(800 + theme.spacing(2) * 2)]: {
width: 800,
marginLeft: "auto",
marginRight: "auto"
}
},
paper: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
padding: theme.spacing(2),
[theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
padding: theme.spacing(3)
}
}
});
interface AppProps extends WithStyles<typeof styles> {
classes: any;
}
class App extends React.Component<AppProps> {
constructor(props: AppProps) {
super(props);
}
static defaultProps = {
classes: styles
};
render() {
return (
<React.Fragment>
<CssBaseline />
<main className={this.props.classes.layout}>
<Paper className={this.props.classes.paper}>
<Typography component="h1" variant="h4" align="center">
Sub Head
</Typography>
Hello World
</Paper>
</main>
</React.Fragment>
);
}
}
export default withTheme(withStyles(styles)(App));