Ant design CSS

Hi ,

I am developing a custom view in theia , with AntD Components like Button and Text-boxes.

I am able to see the view but the style is not there , when i add import "antd/dist/antd.css"; in my frontend-module.ts , the whole theia IDE changes and uses the dark-theme from antd.

Can I limit this to my own view/widget, is there any example similar with bootstrap-css or material-ui which I can look into?

Abhishek Chakraborty

@chakraborty-slx thank you for the discussion, it looks like it’s an implementation error, you’ll likely want to debug and see what might be happening as it is difficult to help without looking at the source code.

Can I limit this to my own view/widget

You should be able to, it’s an implementation detail. You can for instance only apply the components to your custom extension, and prefix your custom styling to your widget itself.

Is there any example similar with bootstrap-css or material-ui which I can look into?

You can take a look at the theia-trace-extension which uses semantic-ui, I believe it should be fairly similar to your use-case.

Thanks @vince-fugnitto , I will look in to this theia-trace-extension.

I have created this repo to track the work , if I am able to find a solution i will update the repo with it.

@vince-fugnitto I explored the repo , but this is not helpful, as semantic-ui-css and semantic-ui-react are only added as redundant dependencies in the package.json file. the react-components are not using any components provided by semantic-ui .

I tried removing the dependencies and build the package again, it works.

So I am trying to looks for other examples.

any progress?

I end-up removing antd css and components for my theia extension.

@chakraborty-slx @navono i stumbled upon the same issue when i added a dependency (which uses antd) to a theia extension. Actually it is kind of by design that antd leaks global styles, see these issues

I ended up modifying the bundled CSS of the dependency i’m using and removed the global styles coming from antd manually…sure not a sustainable solution, but for a prototype it might be okay.