How to style leaflet-PopUp width and hеight on ReactJS?

Question

I try to style PopUp because I need more width and height for my chart who display on every click on the marker.

I try with:

<Popup ClassName="PopUp"> in my App.JS and in the CSS file I write .PopUp { width:600px, height:400px }

But without result..

Is there a way to increase the width and height?

The code:

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;

Can you sample code how to solve this problem? And if I try to put more graphics under one another, will the window be enlarged?

Answer 1

The method I use is, I wrap the Popup in a div, give that div a className and style it in css. if u inspect the popup u can view the elements, if popup is card for example u can style it with .Popup div{} in css

as per popup documentation u can do:

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

method 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
}