Пользовательский интерфейс React Leaflet Material divIcon не стилизован ⇐ CSS

[Anonymous]

В React Leaflet я пытаюсь использовать divIcon для визуализации пользовательского маркера пользовательского интерфейса материала, который принимает опорный цвет фона. Однако, когда маркер используется в листовке, стиль фона не применяется.
Ниже приведен код проекта:
Codesandbox: https://codesandbox.io/p/sandbox/leafle ... c%2FApp.js
Demo.js

Код: Выделить всё

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

Код: Выделить всё

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

const HomeIcon = createSvgIcon(
,
"Home"
);

function LeafletMarker({ bgcolor }) {
return (



);
}
export default LeafletMarker;

Мне удалось отобразить цвет фона, добавив style={{ backgroundColor: bgcolor }} в LeafletMarker, однако я бы предпочел, чтобы он работал с использованием свойства sx, если это возможно.
EDIT:
Исправлен пример кода, поскольку он не включал исходную опору цвета фона sx, которая демонстрирует проблему.>

Подробнее здесь: https://stackoverflow.com/questions/778 ... not-styled