Topic: Angular Styling Encapsulation Not Working
Armstrong free asked 2 years ago
Expected behavior I'm sure I'm missing something being a newby to MDB, but I am unable to style elements of MDB within child components. For example, if copy and paste a snippet from the intros section into a child component that I want for a specific page, I am unable to change or customize the styles of the section within its component.
Actual behavior The only way that I can style the intro section is by adding custom styles to the app's main style.scss file, which pretty much defeats the purpose of Angular's component encapsulation. For example, the intro snippet uses the '.view' class. Now, every other element with the '.view' class includes the background img from the intro snippet, such as a card element.
I am having this issue across the entire app, and not just with the intro section. For example, I have having the same issue with the progress bar. The only way to customize the height using the '.progress .progress-bar' classes is to customize them within the main styles.scss file.
Resources (screenshots, code snippets etc.)
I think that everything is working correctly in this case. Due to styles encapsulation, you shouldn't be able to customize MDB components styles within child components scss files (unless you use
You can read more about MDB styles customization here: https://mdbootstrap.com/docs/angular/getting-started/styles-customization/
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: Computer
- Browser: Sarafi and Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No