I'm using quasar components in VueJS to make an app. I have a child component being imported in parent component. For the child, I have overrided and applied custom css by accessing the quasar classes directly in its style tag. The problem is after importing child in parent class, the parents css is applied on child. Even if I use scope,module or deep it has no effect as I want to change the quasar components internal root css.
I have also tried setting the child's style on runtime in created() but it does not have any effect and doesn't accept !important keyword as well.
Is there any way to apply custom child's css on quasar components root/internal css and not let the parent css get applied on child? Please help.
you must remove scope field from your style tag, then you can override quasar classes. because when you have scope, the framework append hash code to all your class and id name in your style and your class name has been changed.