React force background color full height

Question

I have my App.js class which renders as

const theme = createMuiTheme({
  palette: {
    primary: lime,
    secondary: {
      ...grey,
      A400: \'#00e677\         


        

Answer 1

This is a version of Temani Afif's answer.

I use Grommet within React.
To fill the whole screen with my theme background (dark!) I styled the style provider HOC thus:

  import styled from 'styled-components';
  FillGrommet = styled( Grommet )`min-height: 100vh;`;

then, in render() I wrote:

    return (
      <this.FillGrommet theme={ dark }>
        <AppBar /  
        ...

It is recommended to apply the style outside render() for performance reasons.

Answer 2

Instead of using height:100% you may try height:100vh. Using % is relative to the parent height but using vh is relative to the height of the viewport. So making 100vh will ensure that the block fill all the height of the screen.

You can read more about here