Comments (17)
@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
from react-awesome-query-builder.
@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.
from react-awesome-query-builder.
I'm having the same issue. It's due to antd being semversioned at v2.12.2 and currently antd is at v3.9.
from react-awesome-query-builder.
I tried yarn add https://github.com/ukrbublik/react-awesome-query-builder.git#antd-3
but it didn't seem to work
from react-awesome-query-builder.
Can you provide more info, what kind of styles are messed up, maybe screenshot, page example?
from react-awesome-query-builder.
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... :(
from react-awesome-query-builder.
The antd have global styles that can 'leak' into the application;
See:
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.
from react-awesome-query-builder.
What if move antd from dependencies to peerDependencies in this project?
from react-awesome-query-builder.
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?
from react-awesome-query-builder.
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 :)
from react-awesome-query-builder.
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
from react-awesome-query-builder.
@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)
from react-awesome-query-builder.
@ukrbublik I have same issue it messes up all my styles can i isolate query builder's styles , is there any workaround ?
from react-awesome-query-builder.
@vitali-svishchou Thanks
from react-awesome-query-builder.
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.
from react-awesome-query-builder.
I have suggested a solution here, but you have to fork the repo.
from react-awesome-query-builder.
See latest version: import 'react-awesome-query-builder/css/antd.less';
from react-awesome-query-builder.
Related Issues (20)
- popupMatchSelectWidth consol error
- vals.map is not a function
- jsonLogic expression loading issue with some-in HOT 2
- multiselect_contains spelOp change, data incompatible
- XSS handling for antd select options
- Support safe navigation operator in spel operators/functions
- Allow custom component for rule/group container
- Type conflict in core package since v6.4.1 HOT 1
- CSS rules are not scoped to the component
- How can we encode filter value?
- Missing "conjuction" and "not" in RuleGroupExtProperties type
- MuiConfig.settings.renderField Typescript Error
- How can we set thousand separator input number?
- Pass to MuiFieldSelect customProps not working
- Support "Combinators between rules" HOT 1
- antd date picker style doesn't load when installing antd v5.14.2
- generateConfig[fn] is not a function for antd package HOT 4
- Field values are breaking on source change
- No aria-label for IconButton in MUI/Material packages
- Default Function Select HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-awesome-query-builder.