Inserting map/scene from react-arcgis with legend inside

Question

I am inserting maps in react app. I am following examples from package "react-arcgis".

Like: (Map component - name Mapw.js)

import * as React from 'react';
import { Map } from 'react-arcgis';

export default (props) => (
<Map
    style={{ width: '100vw', height: '100vh' }}
    mapProperties={{ basemap: 'satellite' }}
/>
)

And using like:

import React from 'react';
import ReactDOM from 'react-dom';

import Mapw from './Mapw'

ReactDOM.render(
  <div>
  <Mapw />
  </div>,
  document.getElementById('container')
);

It is working but it has the undesired effect like image below:

Map showing with legends and controls outside map image

Could someone shed some light on how display a clean map that I could use like above or integrate in other component, like a popup, but with the texts and controls integrated (or at least not visible and taking space)?

Answer 1

Be sure to load the appropriate CSS stylesheet for the ArcGIS JS API in your html. That should solve this problem.

<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">