topic Re: How to add a custom stylesheet to widget.tsx in ArcGIS JavaScript Maps SDK Questions

How to add a custom stylesheet to widget.tsx

Gurunara — Sun, 13 Apr 2025 18:00:33 GMT

Would like to include a custom css stylesheet into a widget.tsx.
Created style.css and did
import './style.css';
from within the widget.tsx of custom widget under your-extensions/widgets folder.

in style.css for e.g.
input {
border: 2px solid red;
}

but doesn't seem to do anything... what might be the proper implementation for adding styles to only the custom widget within experience builder 1.14?

Re: How to add a custom stylesheet to widget.tsx

Noah-Sager — Tue, 15 Apr 2025 13:54:14 GMT

Hi @Gurunara, for working with the ArcGIS Maps SDK for JavaScript, this might be a good time to consider migrating from widgets to components.

https://developers.arcgis.com/javascript/latest/components-transition-plan/

https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/javascript-maps-sdk-a-full-transition-to-components

If you're working with the Experience Builder, you might get better help if you post in their space:

https://community.esri.com/t5/arcgis-experience-builder/ct-p/arcgis-experience-builder

Re: How to add a custom stylesheet to widget.tsx

Gurunara — Thu, 24 Apr 2025 12:51:55 GMT

I achieved this by modifying custom theme added to the project... and by exporting something like Global type:

export const Global = (props) => {
return css`
.selector-class {
display: none !important;
}
`;
};

I made the selectors specific for my widget...

Trying to export something specific for the widget (name) didn't seem to work...
(for e.g.)

export const CustomWidget = (props) => {
return css`
`;
};