mdb components


Topic: mdb components

Tony Carter pro premium asked 3 months 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?


Damian Gemza staff answered 3 months ago

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 pro premium commented 3 months 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 3 months 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.


Tony Carter pro premium answered 2 months ago

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


Damian Gemza staff answered 2 months ago

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


cparrish pro answered a week ago

Also interested in any updates on this.


Arkadiusz Idzikowski staff commented a week ago

We are still working on this issue.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes