Ant design CSS

chakraborty-slx · 5 August 2021 11:10

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?

Regards,
Abhishek Chakraborty

vince-fugnitto · 5 August 2021 12:01

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

chakraborty-slx · 5 August 2021 13:18

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.

github.com

chakraborty-slx/test-theia/blob/main/test-backend/src/browser/test-component.tsx

import React = require("react");
import "antd/dist/antd.css";
// import "./index.css";
import { Form, Input, Button, Select } from "antd";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export type HellowWorldProps = {};

This file has been truncated. show original

chakraborty-slx · 5 August 2021 15:59

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

navono · 28 February 2022 08:39

any progress?

chakraborty-slx · 28 February 2022 10:24

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

alex0711 · 23 April 2022 08:44

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