'Override css style on local component css file

I am getting the following style in my Chrome browser developer inspector

.footer-content__nav[_ngcontent-ema-c214] li[_ngcontent-ema-c214] a[_ngcontent-ema-c214] {
    color: #fff;
    text-decoration: none;
}

This style is set elsewhere in my application however I just need to change the style color for a specific component so I do not want to change it on the global component.

Here is the global component

TS

selector: 'app-page-footer',

CSS

.footer-content__nav {

      li {
        padding: 0 10px;
    
        a {
          color: $white;
          text-decoration: none;
          &:hover,
          &:focus {
            color: $dark;
          }      
        }
    
      }
    }

HTML

<ul class="footer-content__nav">
  <li>
    <a>...
    </a>
  </li>
</ul>

Here is my local component

CSS

.footer-content__nav {

  li {
    padding: 0 10px;

    a {
      color: $dark;
      text-decoration: none;
      &:hover,
      &:focus {
        color: $dark;
      }      
    }

  }
}

HTML

<app-page-footer></app-page-footer>

Is there a way I can achieve this? Right now my local style doesn't even show up in the Chrome dev tools styles.

cssangular


Solution 1:[1]

The global CSS style will always override the local one, so I think you could just delete either one depending on the color you want

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aaron

Related Questions