React Leaflet Material UI divIcon nicht gestylt ⇐ CSS

[Anonymous]

In React Leaflet versuche ich, divIcon zu verwenden, um einen benutzerdefinierten Material-UI-Marker zu rendern, der eine Hintergrundfarb-Requisite aufnimmt. Wenn der Marker jedoch im Faltblatt verwendet wird, wird der Hintergrundstil nicht angewendet.
Unten ist der Code für das Projekt:
Codesandbox: https://codesandbox.io/p/sandbox/leafle ... c%2FApp.js
Demo.js

Code: Select all

import * as React from "react";
import Button from "@mui/material/Button";
import LeafletMarker from "./LeafletMarker";
import { Marker, Popup, MapContainer, TileLayer } from "react-leaflet";
import ReactDOMServer from "react-dom/server";
import "leaflet/dist/leaflet.css";
import Box from "@mui/material/Box";
import L from "leaflet";

export default function Demo() {
return (







);
}

LeafletMarker.js

Code: Select all

import Box from "@mui/material/Box";
import { createSvgIcon } from "@mui/material/utils";

const HomeIcon = createSvgIcon(
,
"Home"
);

function LeafletMarker({ bgcolor }) {
return (



);
}
export default LeafletMarker;

Ich konnte die Hintergrundfarbe anzeigen lassen, indem ich style={{ backgroundColor: bgcolor }} in LeafletMarker hinzugefügt habe. Ich würde es jedoch nach Möglichkeit lieber mit der sx-Eigenschaft zum Laufen bringen.
BEARBEITEN:
Der Beispielcode wurde korrigiert, da er nicht die ursprüngliche sx-Hintergrundfarben-Requisite enthielt, die das Problem verdeutlicht.