反作用力背景色全高

Posted 2023-03-06

【中文标题】反作用力背景色全高

【英文标题】：React force background color full height

【发布时间】：2018-04-25 04:14:27

【问题描述】：

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

我的根类有这种风格

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

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

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

【参考方案1】：

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

你可以阅读更多关于here

【讨论】：

按照建议使用vh style= minHeight: '100vh' 为我工作

【参考方案2】：

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

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

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

然后，我在render() 中写道：

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

出于性能原因，建议在render() 之外应用样式。