Change look and feel of theia message service in single extension

I would like to show my custom message rather than theia provided progress bar while uploading files using fileUploadService.upload. So could you please suggest how can I override notifications-renderer.tsx and notification-component.tsx from @theia/messages just only in a single extension and have default theia messageservice styles in all other extensions.

Things tried:
Tried to create a custom class that extends notification-renderer and created custom notification-component with my own styles. Tried to bind notification renderer to my custom renderer class in the frontend module. But that is changing the styles of all messages, not just in required extension.

Hi @SParvathy,

in theory you could rebind the messageService and all other notification related services in a dedicated inversify container. Similiar to how we bind our trees. Then you need to reuse that container to actually create the FileUploadService, which is then injected with the overriden service instances. All other services stay the same.

However, I wouldn’t recommend going that way. If you’re only looking for changes in the FileUploadService, why don’t you simply override the withProgress method? That way you should be able to accomplish the same goals without digging to deep into the inversify dependency chain.

@msujew Okay thanks. If I am creating a new class extending the FileUploadService of theia to overwrite withProgress function, inorder to have the style change reflected for the required extension I will have to bind FileUploadService class to my custom class where withProgress is overwritten. Correct?

@SParvathy yes exactly :+1: