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

Posted 2023-02-22

【中文标题】无法在材质 ui react 中准确设置网格

【英文标题】：Unable to set the grids accurately in material ui react

【发布时间】：2020-10-15 22:36:36

【问题描述】：

我正在尝试制作一个示例应用程序来测试反应材料 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

【参考方案1】：

您需要删除这些：

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

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

Updated Demo

【讨论】：

没问题。如果对您有帮助，请accept 和/或投票。

你好，我在列表中的整个文本基本上是向左侧倾斜的，尽管右侧还有很多空间，按钮也是如此，它们只能从最左端点击。有没有办法解决这个问题？

您需要做的第一件事是接受您所说的答案并解决了您的问题。第二件事，打开一个新线程来问你的新问题，因为它与原来的帖子完全不同。

接受答案意味着您点击投票按钮下方的绿色箭头勾号。检查here。你没有这样做。如果它在每个问题中都解决了您的问题，那么您应该始终接受答案，您会得到一个令人满意的答案来解决您的问题。不仅是这个问题，而且如果他们解决了您的问题，您其他帖子中的所有答案也会如此。