Topic: Override mdb component CSS rules
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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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