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

user_13067138 0
Viewed 77

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?

arcgis-js-api reactjs
1 Answers

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";
user_120109840
Related