Topic: Override mdb component CSS rules

bitjuice pro asked 3 years ago


I need to override some mdb component css rules, like these ones:

 mdb-stepper .step-title {
    min-width: 60px;

.preloader-wrapper.big {
  width: 90px;
  height: 90px;

mdb-select > div > div.single > div.value,
.mdb-select-toggle {
  color: $color-primary;

 mdb-tabset .card {
    border-radius: 0;

If I write this rules on scss file in my component folder (where there is also html file in which I load mdb components), they don't work.

Instead, if I write this rules on style.scss file that is hosted in my application root folder, they work. But in this way style.scss file became very large and it's difficult to maintain it, so I prefer to write this rules on scss files of my single components.

How can I do it?



Arkadiusz Idzikowski staff answered 3 years ago

There are 3 ways to customize MDB component styles, we have described them in this guide:

If you want to use the approach with global styles, you can always create partial scss files, split your code into smaller chunks and import those partials to the main styles.scss file.

bitjuice pro commented 3 years ago

Thanks Arkadiusz

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No