AzureMapHtmlMarker doesn't include styles generated by styled components about react-azure-maps

[yulinscottkang]

hi @JLittner, there's a (not-so-pretty) workaround by rendering a hidden copy of your styled components outside of the <AzureMapsProvider> container, so that the css can be generated on the page. For example,

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { Button, styled } from "@mui/material";
import {
  AzureMap,
  AzureMapsProvider,
  AzureMapHtmlMarker
} from "react-azure-maps";
import { data } from "azure-maps-control";

const option = {
  zoom: 12,
  center: [-122.335, 47.62],
  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: "<subscriptionKey>"
  }
};

const position = new data.Position(-122.335, 47.62);

const StyledButton = styled(Button)(() => ({
  fontSize: 25
}));

function MyApp() {
  return (
    <>
      <AzureMapsProvider>
        <div style={{ height: "300px" }}>
          <AzureMap options={option}>
            <AzureMapHtmlMarker
              key="1"
              markerContent={
                <div className="pulseIcon">
                  <StyledButton variant="contained">Hello World</StyledButton>
                </div>
              }
              options={{ position }}
            />
          </AzureMap>
        </div>
      </AzureMapsProvider>
      <StyledButton style={{ display: "none" }} variant="contained"></StyledButton>
    </>
  );
}

ReactDOM.createRoot(document.querySelector("#app")).render(
  <React.StrictMode>
    <MyApp />
  </React.StrictMode>
);

[JLittner]

Hi,
Thanks for fast answer.

I tried this approach but it didn't work for me. It could be because I had the styled component separated in another component with additional logic and this I tried to render outside of '' and than in the map.

I ended up with css classes and definition of styles for them in the parent component.

'
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { Button, styled } from "@mui/material";
import {
AzureMap,
AzureMapsProvider,
AzureMapHtmlMarker
} from "react-azure-maps";
import { data } from "azure-maps-control";

const option = {
zoom: 12,
center: [-122.335, 47.62],
authOptions: {
authType: "subscriptionKey",
subscriptionKey: ""
}
};

const position = new data.Position(-122.335, 47.62);

const AzureMapContainer = styled('div')(() => ({
height: '100%',
width: '100%',
overflow: 'hidden',

// Styled button
'& .styled-button': {
    fontSize: 25
},

}));

function MyApp() {
return (


<div style={{ height: "300px" }}>

<AzureMapHtmlMarker
key="1"
markerContent={
Hello World
}
options={{ position }}
/>



<StyledButton style={{ display: "none" }} variant="contained">

);
}

ReactDOM.createRoot(document.querySelector("#app")).render(
<React.StrictMode>

</React.StrictMode>
);
'

Thank you again for your support.