Styles customization

There are three different approaches that you can use to customize the styles of the MDB Angular components:

  1. Add custom styles globally
  2. Change component encapsulation method
  3. Use shadow piercing descendant selector

Important

In order to overwrite MDB styles you need to use CSS declaration with higher specificity. Specificity is the set of rules applied to the CSS selectors that allow to determine which style is applied to an element. More specific selectors will take precedence over less specific selectors. We are constantly working on achieving the lowest possible level of style specificity in our components.


Global styles

The easiest way to overwrite MDB styles is to add the custom styles to the global styles.scss file. In this case it's good to add custom selector to so that the custom styles affects only specific elements in the application.

In the following example only the first card will have custom styles on the title.

        
            
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                <mdb-card class="my-custom-card">
                  <!--Card image-->
                  <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).webp" alt="Card image cap"></mdb-card-img>
                  <!--Card content-->
                  <mdb-card-body>

                    <!--Title-->
                    <mdb-card-title>
                      <h4>Card Title</h4>
                    </mdb-card-title>

                    <!--Text-->
                    <mdb-card-text> This card will have custom styles
                    </mdb-card-text>

                    <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
                  </mdb-card-body>
                </mdb-card>
              </div>

              <div class="col-md-6">
                <mdb-card>
                  <!--Card image-->
                  <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).webp" alt="Card image cap"></mdb-card-img>
                  <!--Card content-->
                  <mdb-card-body>

                    <!--Title-->
                    <mdb-card-title>
                      <h4>Card Title</h4>
                    </mdb-card-title>

                    <!--Text-->
                    <mdb-card-text> This card won't have custom styles
                    </mdb-card-text>

                    <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
                  </mdb-card-body>
                </mdb-card>
              </div>
            </div>
          </div>
        
        
    
        
            
          .my-custom-card .card-body p.card-text {
            color: red;
          }
        
        
    

Component scope

By default Angular component styles affects only the component's view. This means that the styles will affect only the elements available in the specific component template. They will not affects any child components used in the template. In order to change that, you need to turn off view encapsulation on your component.

When encapsulation of the component is set to None, all of the component styles will be globally applied. That's why it's good practice to scope the styles apropriately, to avoid targeting other components in the application.

        
            
          import { Component, ViewEncapsulation } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss'],
            encapsulation: ViewEncapsulation.None
          })
          export class AppComponent {}
        
        
    

Deep selector

If you need to change styles of the child component inside component stylesheet and don't want to modify the encapsulation settings, you can use the shadow piercing descendant selector: ::ng-deep. Please note that this selector is currently marked as deprecated and can be removed in the future Angular version in favor of another solution.

In the following example the card text will have red color instead of blue, because you can't target child component styles from your component stylesheet without ::ng-deep selector (unless the component encapsulation is set to none).

        
            
          <div class="container">
            <div class="row">
              <div class="col-md-6">
                <mdb-card class="my-custom-card">
                  <!--Card image-->
                  <mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).webp" alt="Card image cap"></mdb-card-img>
                  <!--Card content-->
                  <mdb-card-body>

                    <!--Title-->
                    <mdb-card-title>
                      <h4>Card Title</h4>
                    </mdb-card-title>

                    <!--Text-->
                    <mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
                      content.
                    </mdb-card-text>

                    <a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
                  </mdb-card-body>
                </mdb-card>
              </div>
            </div>
          </div>
        
        
    
        
            
        ::ng-deep .my-custom-card .card-body p.card-text {
          color: red;
        }

        .my-custom-card .card-body p.card-text {
            color: blue;
        }