NextJS apply styles only to map and not globally

[CDEV500]

When following the nextJS example, the way the css is being loaded into the module still applies the styles globally. This causes all font's on our app to become the font within that stylesheet. Do you have an example on how to only apply the styles to the map component?

[benelan]

Are you talking about the fonts specified in styles/global.css? That was generated by NextJS's bootstrapping CLI; you can replace it with your own global styles.

For reference, here is NextJS's doc about CSS styling.

styles/EsriMap.module.css is using CSS modules, so anything you put in there won't be applied globally.

[CDEV500]

@benelan appreciate your response.

The CSS import in the styles/EsriMap.module.css does appear to be applying globally. Below are two screenshots with the @import 'https://js.arcgis.com/4.25/@arcgis/core/assets/esri/themes/light/main.css'; and without.

Both images are un-styled text added into index.js. Could this be due to the calcite font family being applied to :root in the CSS? I believe in next this still applies globally even from the module.

[benelan]

Sorry for the delay. Yeah I'm able to repro, thanks for reporting the issue. While I look into it, using !important when defining your global CSS is a workaround for now.

:root {
  font: italic small-caps bold 16px/2 cursive !important;
}

Although this will override the fonts within the map as well, in case that's not your intention. It's worth trying to set fonts with !important in a class and use the class for everything except the map. I will look for a better solution though.