Custom style from styles.scss isnt working/seems to be overw


Topic: Custom style from styles.scss isnt working/seems to be overwritten

Haywhite asked 5 years ago

Hello, if I want to set the color of a certain button it should be able to be done like this:

styles.scss:

.btn-outline-primary {
  background-color: #7a8505 !important;
  border-color: #7a8505 !important;
}

(the ".btn.btn-primary{}" style works)

.btn-outline-primary:focus,
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-outline-primary:not([disabled]):not(.disabled).active,
.btn-outline-primary:not([disabled]):not(.disabled):active,
.btn-outline-primary:active:focus {
    border: 2px solid #496000 !important;
    color: #496000 !important;
}

but this doesn't work, it seems like some css file would overwrite my styles.scssNote: If I add the same styling to the components scss file, where the buttontype is used, it works.

example component.html where this buttonstyle should be applied:

<button id="saveandprevious" [disabled]="!allowPrevious()" type="button" mdbBtn
  color="primary" outline="true" class="btn btn-outline-primary waves-effect"
  aria-label="Close" (click)="saveAndPrevious();looseFocus('saveandprevious')"
  mdbWavesEffect>{{ Y.L('Save & previous')}}</button>

Now of course I could add my styling to every components scss class where the buttontype is in use...but i have so many components that this solution does not work for me. After all, the styles.scss is there to change the styles all over my application, so why doesnt it work for me? maybe a compiler issue where the application gets compiled in a wrong order? please help

PS.: other styling from my styles.scss are working, my file tree is ok!

Thanks


Bartosz Termena staff answered 5 years ago

Dear @Haywhite

Try to add to your style.scss:

.btn {
  &.btn-outline-primary {
    background-color: #7a8505 !important;
    border-color: #7a8505 !important;
  }
}

Best Regards, Bartosz.


Haywhite commented 5 years ago

Thank you for your fast answer, your solution works. Regards, Lukas


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: Lenovo Thinkpad
  • Browser: Firefox
  • OS: Windows 10 Pro
  • Provided sample code: No
  • Provided link: No
Tags