Topic: Overriding some MDB SCSS Variables doesn't impact components

ECKD GmbH priority asked 3 years ago

Expected behavior Overriding $btn-padding-y-basic and $btn-padding-x-basic variables impacts buttons created as mdbBtn component. There is no custom scss necessary to fix button paddings.

Actual behavior: The variables are useless, the component is always created with the default paddings even if overwritten correctly (other bootstrap variable overwrites work fine). Button Styles have to be defined manually.

SCSS Imports:

// Define core variables and override variables (Bootstrap & MDB)
@import "variables";

//Import Bootstrap & MDB 
@import "~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss";
@import "~ng-uikit-pro-standard/assets/scss/mdb.scss";

@import "utilities";
@import "custom";

Variable Overwrite:

//Bootstrap Button Variables
$btn-font-size:               $font-size-base * 0.8;
$btn-padding-y:               .65rem;
$btn-padding-x:               1.75rem;

$btn-font-size-sm:            $font-size-base * 0.65;
$btn-padding-y-sm:            .5rem;
$btn-padding-x-sm:            1.5rem;

$btn-font-size-lg:            $font-size-base * 0.95;
$btn-padding-y-lg:            .8rem;
$btn-padding-x-lg:            2rem;

//MDB Button Variables
$btn-margin-basic:    0px 0.375rem;
$btn-font-size-basic: $font-size-base * 0.8;
$btn-padding-y-basic: $btn-padding-y;
$btn-padding-x-basic: $btn-padding-x;

$btn-font-size-small: $font-size-base * 0.65;
$btn-padding-y-small: $btn-padding-y-sm;
$btn-padding-x-small: $btn-padding-y-lg;

$btn-font-size-large: $font-size-base * 0.95;
$btn-padding-y-large: $btn-padding-y-lg;
$btn-padding-x-large: $btn-padding-x-lg;

Button creation

<button id="{{id}}" type="{{type}}" mdbBtn mdbWavesEffect [attr.aria-label]="text"
  [ngClass]="[customClasses, isFlat ? 'btn-flat-' + actionType : '', isActive ? 'active' : '']"
  [disabled]="isDisabled" [color]="actionType" [flat]="isFlat" [size]="size" 
  [block]="displayBlock" (click)="notifiyButtonClicked()" ></button>

Behaviour: Button still rendered with default paddings (x 0.84rem, y 2.14rem), following SCSS is necessary to manually fix:

button, a, div, span {
  &.btn {
    margin: $btn-margin-basic;
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size);

It would be a huge help if it scss variable overrides would impact mdb components without any custom SCSS.

Arkadiusz Idzikowski staff answered 3 years ago

We are aware of this problem and we are currently looking for the best solution for this kind of use cases. We will probably need to switch from scss variables to css custom properties to allow for the dynamic value changes.

Premkumar Sivananainthaperumal pro commented 2 years ago

In version 9.3.1 also the issue is not fixed. Still not able to override the primary color of the button and even .bg-primary.

dsbweb premium commented 2 years ago

I am also unable to override all bootstrap variables. Primary, secondary, alert, danger etc... Please fix this! :)

Arkadiusz Idzikowski staff commented 2 years ago

Currently, it is not possible to correct this problem due to how dynamically loaded styles by Angular work. Please take a look at our styles customization guide:

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: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: All
  • Browser: Chrome
  • OS: All
  • Provided sample code: No
  • Provided link: No