Topic: Worst of two worlds

Ivar free asked 3 years ago

I'm in progress of migrating an Angular 7 project to Angular 9. 90% of styles came from our global styles.scss build.

// Our styles.scss used to look like this.
$image-path: "~ng-uikit-pro-standard/assets/img";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "partials/variables";

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap";
@import "~ng-uikit-pro-standard/assets/scss/mdb"; 

/* ... */

Expected behavior

Ability to customize mdb styles and bootstrap variables and styles.

Actual behavior

Styles are difficult to customize. Skins seem like a partial solution. Packaged MDB component styles override global page styles.

Resources (screenshots, code snippets etc.)

ViewEncapsulation.None? wtf? What's the point of having component styles here then? No source for component styles or PRO styles in npm package to use in our project's style build for overriding MDB's (effectively global) styles.

!important properties

Arkadiusz Idzikowski staff answered 3 years ago

We already know about the problems with styles customization, we are currently working on it and trying to find the best solution for this problem.

You can still overwrite component styles in your global styles by using css rules with higher specificity.

Ivar free answered 3 years ago


As a feedback. I think the main reason this library was used, was the good base styling and the material look to base rest of the work on, not the actual component implementations. Only actually using the Accordion, the double navbar. mdbInput and mdbButton for styles and effects.

Guess overwriting can be done by including a copy of and compiling all the MDB module scss files together. For now I'll try to get by with mostly using skins and fixing other issuses by hand.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.0.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes