How to add a custom stylesheet to widget.tsx

[Gurunara]

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?

[Noah-Sager · Accepted solution]

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

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

[Gurunara]

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`
`;
};