Блог

У меня есть listview внутри div, который изменяет цвет фона в зависимости от режима дня / ночи. Фон в index.html установлен в белый цвет и настроен на растягивание до 100% высоты, что работает в дневном режиме. Проблема заключается в ночном режиме, когда я добавляю элементы в listview, в конечном итоге он начинает показывать белую полосу внизу, которая увеличивается в размере для каждого добавляемого мной элемента. Я предполагаю, что высота 100%, для которой установлен фон, не является динамической, что вызывает проблему при добавлении элементов в listview. Есть идеи о том, как обойти это?

Как отображается div

nightMode — это состояние, которое изменяет цвет между белым и черным для ночного режима.

 return (
    <div style={{height: '100%', padding: 50, flexDirection: 'column', backgroundColor: nightMode.background}}>

<div style = {{paddingTop: 40}}>
  <List>
    {todos.map((value, index) => {
      return(
        <ListItem key={todos.id}> 
          <ListItemIcon>
            <Checkbox
              edge="start"
              checked={false}
              onChange={() => removeTodo(index)}
              tabIndex={-1}
              disableRipple
            />
          </ListItemIcon>
          <ListItemText disableTypography style={{fontFamily: 'Work Sans', fontSize: 35, color: nightMode.listText}} primary={value.text}/>
        </ListItem>
      );
    })}

    <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
      <Alert onClose={handleClose} severity="success">
        Task Finished!
      </Alert>
   </Snackbar>
 </List>
</div>
  

Index.html это создает фон высотой 100%

 <style>
   html,
   body,
   #root {
     height: 100%;
   }

body {
  margin: 0;
  background-color: #ffffff; /**This section is causing the issue**/
  font-family: "Roboto", sans-serif;
}
  

Я удалил:

 #root {
 height: 100%;
}
  

и цвет, масштабируемый для всей страницы. Надеюсь, с этим решением проблем нет.

почему бы не обновить цвет фона тела;

 
document.body.style.backgroundColor = nightMode.background;
return (<div></div>)