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

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Need a simple way to override the existing css of mdb angular components

shivani.mslc pro asked 7 years ago

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

Damian Gemza staff answered 7 years ago

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 7 years ago

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

Damian Gemza staff commented 7 years ago

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

shivani.mslc pro commented 7 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

Damian Gemza staff answered 7 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: 
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 7 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 7 years ago                                                                                                                    

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

                                                                                                                                                                                                            
                                                    
                                                        

                                                            shivani.mslc
                                                             pro                                                             commented 7 years ago                                                                                                                    

                                                        Thank you so much for the help...                                                     
                                                                                                            

                                                                                                                                                                                                            
                                                    
                                                        

                                                            Damian Gemza
                                                             staff                                                             commented 7 years ago                                                                                                                    

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

                                                                                                

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                                        
                                            

                    
                    
                    

                                           
                 
                  
                      
                     

                      

                       
FREE CONSULTATION

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


                      

                    

                      
                  
                    
                    

                    

                        

                          
                          
                          
                          
                          
                         

                        

                      

                    
                       


                                                 

                        
                        

                            
                            
Status

                            
                            

                                

                                            Closed                                        

                                                            

                        

                        
                                                
                        

                            
                            
Specification of the issue

                                            
        

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

        

                                

                        
                                                                                                                            
                            

                                
                                
About author

                                                                    
                

                            
                        

                


                    
                    

                        shivani.mslc
                    

                    
                    
                    

                    
                    
                                            Pro User
                                                            
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    -5Support score
                    

                    3Questions
                    0Answers
                    

                    
                    

                    0Snippets likes
                    0Snippets