search

qlik-demo-team / qdt-components

React Components to be used with Angular 10, React 16 and Vue 2. Connects with the Capability API and Engine API.
MIT License
92 stars 50 forks source link

CSS conflict with Angular Material #48

Closed vitaly-t closed 5 years ago

vitaly-t commented 5 years ago

I was able to reuse the example code in my Angular 7 app, but just as I started integrating Angular Material, I ran into a CSS conflict.

For example, the demo overrides button to use font-family: QlikView Sans,sans-serif, so font on all buttons is off.

Please note that I am using the exact demo mashups, from sense-demo.qlik.com, not my own. So I wonder now:

I'm trying to create a POC that it can work with the latest Angular Material, before trying to create my own qlik mashups.

fkabinoff commented 5 years ago

That's part of the CSS for the capability APIs that qdt-components uses for the Visualization API for the QdtViz component. If you're not using QdtViz you can set vizApi to false in your config and it won't load the capability API stuff. Otherwise, you have to deal with the CSS being loaded. Use more specific selectors to override.

vitaly-t commented 5 years ago

If you're not using QdtViz you can set vizApi to false in your config and it won't load the capability API stuff

If I do that, the CSS in the loaded components is then missing, and it all looks wrong. And if I do load by setting QdtViz = true, it breaks the Material CSS.