In my App.js file, I have a class that renders like this:
const theme = createMuiTheme({
palette: {
primary: lime,
secondary: {
...grey,
A400: '#00e677'
},
error: red
}
});
class App extends Component {
render() {
const classes = this.props.classes;
return (
<div className={classes.root}>
<MuiThemeProvider theme={theme}>
<MyApp/>
</MuiThemeProvider>
</div>
);
}
export default withStyles(styles)(App);
// Styles for the root class
const styles = theme => ({
root: {
width: '100%',
height: '100%',
marginTop: 0,
zIndex: 1,
overflow: 'hidden',
backgroundColor: theme.palette.background.default,
}
});
Despite setting height:'100%', there is a blank space below the MyApp's div with a grey background, as shown in the attached image.
How can I ensure that the background color fills 100% of the window?