Need a simple way to override the existing css of mdb angula

Topic: Need a simple way to override the existing css of mdb angular components

shivani.mslc pro asked 6 years ago

Is there any simple way of overriding the css of angular components ?

Add comment

Damian Gemza staff answered 6 years ago

So if you need something like this, you can always add some unique class only for this tabs, which do you want to edit (for example ".edit-tabs") in your global styles.scss, and in this class put every other classes which has to be changed.

For example:
<pre>HTML:</pre>
<div>
<pre><mdb-tabset #staticTabs class="change-class" [buttonClass]="'nav-tabs tabs-3 indigo'" [contentClass]="'card'">

<mdb-tabheading="Profile">

<divclass="row">

<divclass="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</mdb-tab>

<mdb-tabheading="Follow">

<divclass="row">

<divclass="col-12">

<br>

</div>

</mdb-tab>

<mdb-tabheading="Contact">

<divclass="row">

<divclass="col-12">

<br>

</div>

</mdb-tab>

</mdb-tabset></pre>
<div> CSS:</div>
</div>
<div>
<pre>.change-class {

.indigo {

background-color: red!important;

}

}</pre>
</div>
<pre></pre>
<div>Best Regards,</div>
<div>Damian</div>

Please insert min. 20 characters.

HTML:

<mdb-tabset #staticTabs class="change-class" [buttonClass]="'nav-tabs tabs-3 indigo'" [contentClass]="'card'">

<!--Panel 1-->

<mdb-tabheading="Profile">

<divclass="row">

<divclass="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</div>

</mdb-tab>

<!--Panel 2-->

<mdb-tabheading="Follow">

<divclass="row">

<divclass="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</div>

</mdb-tab>

<!--Panel 3-->

<mdb-tabheading="Contact">

<divclass="row">

<divclass="col-12">

<br>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

</div>

</div>

</mdb-tab>

</mdb-tabset>

CSS:

.change-class {

.indigo {

background-color: red!important;

}

}

Best Regards,

Damian

shivani.mslc pro commented 6 years ago

This worked... Thanks... Can you help with one more thing ?! How to override internal classes like "nav-item,nav-item a" in tabs? The solution you gave works on overall tabs but if I want to work on internal options of tabs...

Damian Gemza staff commented 6 years ago

You could use something like this: .nav-tabs.tabs-3 { .nav-item { } .nav-item a {} }

shivani.mslc pro commented 6 years ago

Thank you so much for the help...

Damian Gemza staff commented 6 years ago

Glad that could help! Closing topic. Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello shivani.mslc, If you want to override some mdb classes, you can take that class name, and add your custom styles in your app.component.scss file. For example, if you want to override flat button, please head into your component.scss file, and add your overriting styles:

.btn-flat {

background-color: red;

}

If this won't work for you, please let me know.

Best Regards,

Damian

shivani.mslc pro commented 6 years ago

These components are fine. But to override tabs & pills css, with the approach you, gave doesn't work.

Damian Gemza staff commented 6 years ago

So please try to override it in global styles.scss file, and let me know.

shivani.mslc pro commented 6 years ago

Had tried that way as well. The only option that worked was to write override the snippet given in _tabs.scss (mdb file) in custom.scss (file provided by mdb to write custom code). But doing so, overrides css across all the modules and components where tabs / pills are used. This is not what I want. I must be able to override it for a particular module or component where I need the custom css for tabs / pills not affecting other modules or components

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

shivani.mslc

Pro User -5Support score
3Questions 0Answers 0Snippets