如何设置 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 的 class 来操纵传单弹出窗口的内置外观，例如更改弹出窗口的边框半径

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

要编写自定义文本并赋予其个人风格，我建议创建一个名为 f.i popupStyles.js 的文件。在那里你声明了你所有的弹出式样式。然后将其导入 Map comp 并编写您的 html。使用 bootstrap 获得所需的利润和其他好处。

popupStyles.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 };

然后在比赛中

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>

Demo

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>
  );
};

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

How to style the react-leaflet popup

javascript

reactjs

leaflet

popup

react-leaflet