Topic: Component Customization
Hi,
I have two questions regarding component styling:
1) Is there any way to have some MDB free and Pro components use certain styles from MDB but others from Bootstrap 4? For example, I want the style an input text field to look like Bootstrap 4’s edit field which has borders around it (and not the underline style) but other controls such as headers, I want to use the MDB styles?
2) How do I customize the look and feel of components (free and Pro components)? I read the section on Style Customization in your documentation. I see a list of controls in *.scss files but do you have a set of variables to override for both jQuery and React libraries? Do you have any step by step instructions/tutorials on how to override certain styles?
Any pointers is much appreciated.
Thank you!
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 jQuery
- MDB Version: 4.15.0
- Device: All
- Browser: IE 11, Firefox, Chrome
- OS: Linux, Windows
- Provided sample code: No
- Provided link: No
Marta Szymanska staff pro premium commented 5 years ago
Hi,
Ad 1. When you use the MDB Gulp version (both free and pro) you can remove or comment the *.scss files with our material styles, for example, you can comment this line
@import "free/forms";, recompilemdb.cssfile and you will have the Bootstrap styling inputs instead of material design ones.Ad 2. You can customize styles and components, for example, in the
_custom-styles.scssand_custom-variables.scssfiles. We don't have one document with a list of our variables, the SCSS variables you can see in thescss/core/variables.scssfile. For questions about the React project, please create a specific ticket only with the 'react' label, and out React team will help you. For now, we don't have step by step tutorials about overwriting styles in the MDB package but maybe some of our tutorials here: https://mdbootstrap.com/education/ will be helpful for you.Best, Marta