customizing widgets in ArcGIS js 4.31

Yoav_Leshem — Sun, 22 Dec 2024 13:01:25 GMT

Hi ESRI Community,

We upgraded from 4.25 to 4.31 and are facing issues customizing built-in widgets. Previously, we used CSS to change widget colors, sizes, and icons, but with the introduction of nested web components in 4.31, we can no longer style them in the same way.

We understand we can override some styles using CSS variables and the esri-widget class, but this doesn't provide us with the same level of control. For example, we want to:

Change the widget sizes
Replace the icon with a custom one
Modify sizes and the hover/focus/active states and other inner elements (like calcite-button and calcite-icon)

We’d prefer to avoid using JavaScript for dynamic style changes. Is there a better way to target and style these inner elements without resorting to JS?

Thanks for your help!

topic customizing widgets in ArcGIS js 4.31 in ArcGIS JavaScript Maps SDK Questions

customizing widgets in ArcGIS js 4.31