javascript - 如何设计 react 传单弹出窗口的样式

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

然后在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>

Demo