javascript - 如何在 ReactJS 上设置 leaflet-PopUp 的宽度和高度？

Question

我尝试设置 PopUp 的样式，因为我的图表需要更多的宽度和高度，这些图表会在每次点击标记时显示。

我尝试:

<Popup ClassName="PopUp"> 在我的 App.JS 和我编写的 CSS 文件中 .PopUp { width:600px, height:400px }

但是没有结果..

有办法增加宽度和高度吗？

代码:

import React from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import {
  ComposedChart,
  Bar,
  Area,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from 'recharts';

const customMarker = new L.Icon({
  iconUrl: "https://unpkg.com/browse/leaflet@1.5.1/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

class Map extends React.Component {

  state = {
    date: new Date(),
  }

  onChange = date => this.setState({ date })

  constructor() {
    super();
    this.state = {
      coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 },
        { lat: 41.26365, lng: 25.24215 },
      ],
      zoom: 8,
      dats: null,
      loading: true,
      dataAPI: null,
      temp: null,
    };
  }

  onChange = date => this.setState({ date })

  async componentDidMount() {
    const url = "http://192.168.0.1:8000/?date=2019-10-20&id=4&daysForward=2";
    const response = await fetch(url);
    let data = await response.json();
    this.setState({ dataAPI: data.aladinModel[0], loading: false });
    this.setState({ temp: data.aladinModel[0], loading: false });
    this.setState({ dats: data.aladinModel[0], loading: false });
    //console.log(this.state.temp[1].TA);
    //console.log(this.state.dats[1].DATS);
    //console.log(this.state.date);
  }

  render() {
    const { coords, zoom } = this.state;
    return (
      <LeafletMap
        center={[42.733883, 25.48583]}
        zoom={zoom}
        style={{ height: "100vh" }}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {coords.map(({ lat, lng }, index) => (
          <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <Popup>
              {index + 1} is for popup with lat: {lat} and lon {lng}
              <ComposedChart width={500} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area type='monotone' dataKey='TA' fill='#f56200' stroke='#f56200' />
                <Line type="monotone" dataKey="RH" stroke="#8884d8" />
                <Bar dataKey='WS' barSize={20} fill='#00ff0d' />
                <Bar dataKey='SR' barSize={20} fill='#f70000' />
                <Bar dataKey='RR' barSize={20} fill='#003cff' />
                <Bar dataKey="DATS" stackId="a" fill="#000000" />
              </ComposedChart>
            </Popup>
          </Marker>
        ))}
      </LeafletMap>
    );
  }
}

export default Map;

你能提供如何解决这个问题的示例代码吗？ 如果我尝试将更多图形放在一起，窗口会放大吗？

Answer 1

我使用的方法是，我将 Popup 包装在一个 div 中，给该 div 一个 className 并在 css 中设置它的样式。如果你检查弹出窗口，你可以查看元素，如果弹出窗口是卡片，你可以使用 css 中的 .Popup div{} 对其进行样式设置

根据弹出文档，您可以执行以下操作:

<Popup maxWidth="100" maxHeight="auto" > ... Data here </Popup>
//try changing maxWidth values it works

方法2:

<div className="Popup">
<Popup/>  // Inspect this popup, if its a div 
</div>

in CSS

.Popup div{   or use this  .Popup > div{  // styles the nearest div of .Popup
width: //give width here
height: //give height here
}