Hello Esri Community, I'm experiencing a CSS cascade issue when integrating the ArcGIS JavaScript API with Panda CSS in my application. The problem stems from how the API at 4.34 now handles automatic style injection. (as per the latest documentation):
Current Setup:
Using ArcGIS JavaScript API with automatic CSS loading (as recommended in the documentation)
Implementing Panda CSS with CSS layers for proper cascade control
CSS layer order: @layer vendor, reset, base, tokens, recipes, utilities;
The Problem: The ArcGIS API automatically injects its styles at runtime, which bypasses my CSS layer system. This means:
My custom Calcite CSS variables (defined in the base layer) get overridden
The API's dynamically injected styles always have higher specificity
CSS layers become ineffective for managing the cascade order
Questions:
Is there a way to disable automatic CSS injection and manually import ArcGIS styles into specific CSS layers?Are there configuration options to control when/how the API injects its styles?What's the recommended approach for integrating ArcGIS API with modern CSS frameworks that rely on cascade layers?
Desired Solution: Ideally, I'd like to import ArcGIS styles into my vendor layer so they can be properly overridden by my base layer styles, maintaining predictable cascade order. Any guidance on best practices for this integration would be greatly appreciated!
Edit:
Apparently importing the styles seems to work!
@import "@arcgis/map-components/main.css" layer(vendor);
@import "@esri/calcite-components/calcite/calcite.css" layer(vendor);
@import "@arcgis/core/assets/esri/themes/light/main.css" layer(vendor);
