Messing up the styles in an existing project

[MihaiPerju]

I have a project and I wanted to integrate this query builder into it, but it messes up all my styles. Can anyone help me to find a way to "isolate" query builder own styles from the rest of the styles from the application?

[sitch]

I'm having the same issue. It's due to antd being semversioned at v2.12.2 and currently antd is at v3.9.

[sitch]

I tried yarn add https://github.com/ukrbublik/react-awesome-query-builder.git#antd-3 but it didn't seem to work

[ukrbublik]

Can you provide more info, what kind of styles are messed up, maybe screenshot, page example?

[sitch]

Tons of minor things from menu sizing, duplication of breadcrumb icons, etc. I also used yarn add https://github.com/joskoanicic/react-awesome-query-builder.git#feature/antd3_react16 to pull in the newer v3.9 branch (built it by going into /node_modules/react-awesome-query-build/ and running yarn) but was having what seemed to be dependency issues with transit / Immutable, getting an error that Map was not an instance of Map in PropTypes. Seems like this packages tight coupling with antd / Immutable / redux makes it challenging to use without regular updates... :(

[that-jpg]

The antd have global styles that can 'leak' into the application;

See:

• Global CSS included with component CSS import ant-design/ant-design#4331
• Remove global Styles ant-design/ant-design#9363
• docs: explain how to prevent global styles pollution ant-design/ant-design#11929

I don't think that the update will fix the problem because its not 'fixed' by the antd team, the sad part it is that this issue is not a priority for them, so the fix may take some time.

[ukrbublik]

What if move antd from dependencies to peerDependencies in this project?

[ukrbublik]

Also, as you can see at demo, I import css/denormalize.scss and css/reset.scss to fix some global styles after antd.
Have you tried this?

[that-jpg]

Yep, but my project is on a stage that we would had just to much to fix.
And I use CSS-in-JS too, this increase a little the complexity of adding 'global' styles.

PS, you answered my comment pretty fast, thank you for taking the time :)

[vitali-svishchou]

it would be nice to have an opportunity not to add any styling at all and let developers to define their own =)

cause currently, as others in this conversation, after adding react-awesome-query-builder to the project a lot of styles became broken because of antDesign

[ukrbublik]

@vitali-svishchou If I exclude antd from this lib, I'll have to rewtite widgets without using antd. And let developers choose between antd widgets and "vanilla" ones.
If somebody helps me with this, it would be great. (it's not complex, I just don't have much time for now)

[bilal-rao]

@ukrbublik I have same issue it messes up all my styles can i isolate query builder's styles , is there any workaround ?

[vitali-svishchou]

@bilal-rao , not really clear one, but it works - import any component of react-awesome-query-builder before importing main styles of your application. in this case you will rewrite antd styles by yours, but it'll complitely breake styles of react-awesome-query-builder

[bilal-rao]

@vitali-svishchou Thanks

[OrDuan]

Yes, this makes it impossible to integrate into existing project, but thanks to @vitali-svishchou comments I found the workaround:
I imported everything in my App.js file (which loads first), then imported react-awesome-query-builder just before every other style, then exported the Query & Builder from the same file(App.js) and then Imported and reused them whenever needed.

While this is super awkward, it worked.

[ryanau]

@OrDuan We ran into the same issue and your solution works! But instead of importing and re-exporting react-awesome-query-builder from App.jsx, we just have import { Query, Builder } from 'react-awesome-query-builder' at the top of our App.jsx file and we can now use import { Query, Builder } from 'react-awesome-query-builder' in other parts of the app as we normally would.

[bandersen22000]

I have suggested a solution here, but you have to fork the repo.

[ukrbublik]

See latest version: import 'react-awesome-query-builder/css/antd.less';