search

benelan / arcgis-esm-samples

Samples that integrate the @arcgis/core build of the ArcGIS Maps SDK for JavaScript with various Server Side Rendering frameworks.
https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/ssr-esm/
Other
22 stars 7 forks source link

NextJS apply styles only to map and not globally #14

Open CDEV500 opened 1 year ago

CDEV500 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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.

Screenshot 2023-05-25 at 11 05 37 PM Screenshot 2023-05-25 at 11 06 08 PM

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 commented 1 year ago

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.