如何为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>

我希望能够将弹出窗口的样式设计成以下图像所示：

谢谢。

- James

Answer 1

你可以通过为leaflet的弹出窗口分配request-popup类来操纵其内置外观，例如更改弹出窗口的边框半径。

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

为了编写自定义文本并赋予其个人风格，我建议创建一个名为popupStyles.js的文件。在那里，您可以声明所有弹出窗口样式。然后，在Map组件中导入它并编写自己的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

- kboul

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

- Michał J. Gąsior