如何在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/[email protected]/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;
您可以通过示例代码解决该问题吗？如果我尝试将更多图形相互放置，窗口是否会放大？

我尝试设置PopUp的样式，因为我需要为图表增加宽度和高度，图表在每次点击标记时都会显示。我尝试使用：在App.JS和我编写的CSS文件中...

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：