react力背景颜色全高

IT技术 css reactjs material-ui
2021-04-18 10:10:06

我有我的 App.js 类，它呈现为

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);

我的根class有这种风格

const styles = theme => ({
  root: {
    width: '100%',
    height: '100%',
    marginTop: 0,
    zIndex: 1,
    overflow: 'hidden',
    backgroundColor: theme.palette.background.default,
  }
});

我认为通过设置height:'100%'我已经填满了我的所有窗口，问题是我MyApp的 div下方有一个空白区域（灰色背景），请参见附图。

如何强制背景颜色填充窗口的 100%？

在此处输入图片说明

2个回答

而不是使用height:100%你可以尝试height:100vh。使用 % 是相对于父高度的，但使用 vh 是相对于视口的高度。所以制作 100vh 将确保块填充屏幕的所有高度。

你可以在这里阅读更多

vh按照建议使用style={{ minHeight: '100vh'}}对我有用
2021-06-04 10:10:06

这是 Temani Afif 答案的一个版本。

我在 React 中使用 Grommet。
为了用我的主题背景（黑暗！）填充整个屏幕，我这样设置样式提供程序 HOC：

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

然后，在render()我写道：

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

render()出于性能原因，建议将样式应用到外部。

其它你可能感兴趣的问题
上一篇ReactJs 浏览器无法读取未定义的属性“键” 下一篇将自定义props添加到自定义组件