Worst of two worlds


Topic: Worst of two worlds

Ivar Kängsepp asked 5 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. https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/master/projects/angular-bootstrap-md/src/lib/free/buttons/_buttons.scss

!important propertieshttps://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/blob/master/projects/angular-bootstrap-md/src/lib/assets/scss/core/_mixins.scss


Arkadiusz Idzikowski staff answered 5 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.


Thanks.

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.

FREE CONSULTATION

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

Status

Answered

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