Topic: Angular Styling Encapsulation Not Working
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 ViewEncapsulation.None).
You can read more about MDB styles customization here: https://mdbootstrap.com/docs/angular/getting-started/styles-customization/
Armstrong commented 4 years ago
Lol while I appreciate the response, I have to reply with nope! It is definitely not working for me. I am NOT setting ViewEncapsulation to None. Honestly, I have never had a use case that would need to disable encapsulation. As stated in my previous post as an example, the only way I can add styles to the intros from "Sections" is to add the styles globally. Now, any other element within the entire app that uses the '.view' class renders the same background image used in the intro section. I'm having the same issue with ProgressBars. The only way to style the ProgressBar component is in the style.scss file vs the angular component being implemented.
Arkadiusz Idzikowski staff commented 4 years ago
There are only 3 ways to modify the MDB components styles as described in the styles customization guide. If you need help with the customization of the specific elements, please edit your first post and provide more details about the problems (with some code examples).
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- 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