mdb components

Topic: mdb components

Tony Carter asked 6 years ago

I have purchased the MDB Angular PRO version and imported (7.3.0) into my project. When I add the mdb-card example show in https://mdbootstrap.com/docs/angular/forms/contact/ (pro example), I cannot use scss to override any .card styles in my component because the rendered component creates an inner div with the .card style. This is not the case if I just use the div element with the .card class, in the non mdb-card example.

This is the same issue with other mdb components. Are there examples of overriding mdb components with scss styles?

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Tony Carter,

Could you please describe me, which styles of cards exactly do you want to overwrite? I would like to help you with your case.

I'm sure, that you're able to overwrite the styles of any component in styles.scss stylesheet. Please try it.

Best Regards,

Damian

Tony Carter commented 6 years ago

Damian,

An example of this is .card class. I am trying to overriding the background-color. If I override this in a component that implements the mdb-card element. It does not work because because the actual rendered html contains a child div with the .card class that cannot be overriden because the rule gets applied to the mdb-card element and not the underlying div.

If remove the mdb-card element and just use div with the .card class, I am able to override background-color.

I want to be able to override this in the component.scss file, and not the styles.scss because I do not want the change to be global.

Best regards,

Tony

Arkadiusz Idzikowski staff commented 6 years ago

Dear Tony,

Could you provide an example component in which you want to change the background? Maybe it would be easier to find the solution for this specific component structure.

Adding styles to styles.scss can help to avoid potential problems with styles encapsulation.

Add comment

Tony Carter answered 6 years ago

0 0 Best answer

I still having the issue. After looking at the node_modules folder, it appears that the mdb component template is being applied but it is not replacing the selector for the component.

Example: mdb-accordion

1) The component selector is 'mdb-accordion-item-head'
2) The component template is '<div class=\"card-header {{ customClass }}\" [ngClass]=\"{ 'item-disabled': isDisabled }\" (click)=\"toggleClick($event)\">\n'
3) The generated html is '<mdb-accordion-item-head _ngcontent-c3="" customclass="faq-header" ng-reflect-custom-class="faq-header"><div class="card-header faq-header" ng-reflect-klass="card-header faq-header" ng-reflect-ng-class="[object Object]">'

As you can see the selector is not replaced with the template, it is appended to the selector and "faq-header" class is applied to both elements. This makes it difficult to apply component specific scss rules correctly.

I hope this clears up my question

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Tony,

Okay, thanks for your clarification. You're right. The component styles should be able to be applied from the .component.scss file instead of global styles.scss.

I'll add this problem to our bug list, and we'll resolve it in the future. But unfortunately, I'm not able to provide you any ETA on this fix.

Best Regards,

Damian

Add comment

cparrish pro answered 6 years ago