Component Customization

Topic: Component Customization

duckies free asked 4 years ago

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!

Marta Wierzbicka staff commented 4 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";, recompile mdb.css file 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.scss and _custom-variables.scss files. We don't have one document with a list of our variables, the SCSS variables you can see in the scss/core/variables.scss file. 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

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 <code>@import "free/forms";</code>, recompile <code>mdb.css</code> file 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 <code>_custom-styles.scss</code> and <code>_custom-variables.scss</code> files. We don't have one document with a list of our variables, the SCSS variables you can see in the <code>scss/core/variables.scss</code> file. 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: <a href="https://mdbootstrap.com/education/" target="_blank">https://mdbootstrap.com/education/</a> will be helpful for you.

Best, Marta

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

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

duckies

45Support score
5Questions 2Answers 6Snippets