Search code examples
reactjsarcgis-js-api

How to apply styling to MapView when using @arcgis/core for imports?

In my React application I'm rendering a MapView. However, the zoom in/out button along with any popup templates are appended below the map in standard html.

enter image description here

When I previously used esri-loader for importing arcgis modules, I could fix this issue by setting a CSS option to true, like so. The styling would match the API examples.

loadModules(["esri/views/MapView"], {css: true})

But I can't find any instance of a CSS or styling property in the MapView class. So how do I apply this styling when using @arcgis/core for imports?

Solution

  • The documentation recommends importing directly from the cdn:

    @import "https://js.arcgis.com/4.20/@arcgis/core/assets/esri/themes/dark/main.css";

    Or if you want to import it from your local, you can follow their instructions for referencing local assets, and import from your node_modules:

    @import "@arcgis/core/assets/esri/themes/dark/main.css";