如何设置 react-leaflet 弹出窗口的样式

Question

是否可以设置 react-leaflet.js.org 附带的弹出窗口的样式？ 我一直在修改样式，但是您能否获得弹出窗口的 ui 模板/或完全改变弹出窗口外观的正确方法是什么？

代码片段

<Marker
    key={message._id}
    position={[message.latitude, message.longitude]}
    icon="">

      <Popup className="request-popup">
        <p>...</p>
        <p>...</p>
    </Popup> 
</Marker>

我想将弹出窗口的样式设置为如下所示

谢谢，

Answer 1

您可以通过分配request-popup的类来操作传单弹出窗口的内置外观，以更改例如request-popup的边框半径

.request-popup .leaflet-popup-content-wrapper {
  border-radius: 0px;
}

要编写自定义文本并赋予其个人风格，我建议创建一个名为 fi popupStyles.js 的文件。 在那里你声明你所有的弹出样式。 然后将其导入 Map comp 并编写一个 html。 使用引导程序来实现所需的边距和其他好处。

弹出样式.js

const popupContent = {
  textAlign: "center",
  height: "350px",
  marginTop: "30px"
};
const popupHead = {
  fontWeight: "bold",
  fontSize: "22px"
};

const popupText = {
  fontSize: "15px",
  marginBottom: "20px"
};

const okText = {
  fontSize: "15px"
};

export { popupContent, popupHead, popupText, okText };

然后在comp

import { popupContent, popupHead, popupText, okText } from "./popupStyles";

<Marker position={center} icon={defaultMarker}>
    <Popup className="request-popup">
      <div style={popupContent}>
        <img
          src="https://cdn3.iconfinder.com/data/icons/basicolor-arrows-checks/24/149_check_ok-512.png"
          width="150"
          height="150"
        />
        <div className="m-2" style={popupHead}>
          Success!
        </div>
        <span style={popupText}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </span>
        <div className="m-2" style={okText}>
          Okay
        </div>
      </div>
    </Popup>
  </Marker>

演示

Answer 2

我只是尝试使用 Styled Components 来设计它，并且......它工作得很棒！ :)

import React, { useCallback, useState } from "react";
import styled from "styled-components";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet";

const StyledPop = styled(Popup)`
  background-color: red;
  border-radius: 0;
  .leaflet-popup-content-wrapper {
    border-radius: 0;
  }

  .leaflet-popup-tip-container {
    visibility: hidden;
  }
`;

const icon = new Icon({
  iconUrl: "/marker.svg",
  iconSize: [25, 25],
});

export const MapView = () => {
  const [position, setPosition] = useState(null);

  const handleOnContextMenu = useCallback(
    (event) => {
      setPosition([event.latlng.lat, event.latlng.lng]);
    },
    [setPosition]
  );

  return (
    <Container>
      <Map
        center={[50.061252, 19.915738]}
        zoom={15}
        oncontextmenu={handleOnContextMenu}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />

        {position && (
          <StyledPop position={position} onClose={() => setPosition(null)}>
            <div>
              <h2>menu</h2>
            </div>
          </StyledPop>
        )}

        {position && <Marker position={position} icon={icon} />}
      </Map>
    </Container>
  );
};