无法在材质 ui react 中准确设置网格

Question

我正在尝试制作一个示例应用程序来测试反应材料 ui，但在使用网格时我被卡住了。我的应用程序在主网格容器内有两个网格。一个网格用于列表，另一个用于地图视图。现在，每当列表项增加时，它会在页面上显示一个滚动条来向上/向下移动它，这是我不想要的，因为我希望地图在屏幕上保持稳定，覆盖 100% 的高度和 80% 的宽度。但是一旦列表大小增加，地图也会在页面中滚动。我该如何解决？此外，我的列表按钮还可以在我不知道如何停止的列表子标题上移动。

我的代码是 ...

import React from "react";
import {
  List,
  ListItem,
  Grid,
  Paper,
  Button,
  ListSubheader
} from "@material-ui/core";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./styles.css";
import Icon from "../src/icon.png";
import shadow from "../src/shadow.png";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      location: [
        {
          id: 1,
          machine: 1,
          lat: 51.503,
          lng: -0.091
        },

        {
          id: 2,
          machine: 2,
          lat: 51.56,
          lng: -0.094
        }
      ],
      center: [51.505, -0.091],
      zoom: 11,
      marker: null
    };
    this.clickAction = this.clickAction.bind(this);
  }

  Icon = L.icon({
    iconUrl: Icon,
    shadowUrl: shadow,
    iconSize: [38, 50],
    shadowSize: [50, 64],
    iconAnchor: [22, 34], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

  clickAction(id, lat, lng) {
    this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  }

  render() {
    const styles = {
      Paper: {
        padding: 20,
        marginTop: 10,
        marginBottom: 10,
        height: "90%",
        overflowY: "auto"
      }
    };

    return (
      <Grid container>
        <Grid item xs>
          <Paper style={styles.Paper}>
            <List
              style={{ width: "20%", float: "left" }}
              subheader={
                <ListSubheader component="div">
                  <div>
                    <h1> my appplication </h1>
                  </div>
                </ListSubheader>
              }
            >
              {this.state.location.map(({ id, machine, lat, lng }) => {
                return (
                  <>
                    <ListItem
                      key={id}
                      button
                      onClick={() => {
                        this.clickAction(id, lat, lng);
                      }}
                    >
                      Id {id} <br />
                      machine {machine}
                    </ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                    <ListItem button>a</ListItem>
                  </>
                );
              })}
              <Button style={{ position: "sticky", botton: "0", left: "0" }}>
                sign out
              </Button>
            </List>
          </Paper>
        </Grid>

        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {this.state.location.map(({ lat, lng, id }) => {
            return (
              <Marker position={[lat, lng]} icon={this.Icon}>
                <Popup> {id} </Popup>
              </Marker>
            );
          })}
        </Map>
      </Grid>
    );
  }
}

...

我的示例应用在这里https://codesandbox.io/s/rough-mountain-ogf4v?file=/src/App.js:0-3720

Answer 1

您需要删除这些：

  padding: 20,
  marginTop: 10,
  marginBottom: 10,

将height: 100vh 添加到styles 并为您的ListSubheader 组合提供style={{ backgroundColor: "white" }}。

Updated Demo