Override mdb component CSS rules


Topic: Override mdb component CSS rules

bitjuice pro asked 4 years ago

Hi,

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?

Thanks

Marco


Arkadiusz Idzikowski staff answered 4 years ago

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

https://mdbootstrap.com/docs/angular/getting-started/styles-customization/

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 4 years ago

Thanks Arkadiusz


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: 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
Tags