Override css style on local component css file

Question

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.

I’m not sure if I understand you correctly, but in case I do, you might want to look into ::ng-deep — MikeOne
– MikeOne, Commented Mar 23, 2022 at 20:10

Aaron · Accepted Answer · 2022-03-23 21:52:34Z

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

answered Mar 23, 2022 at 21:52

Aaron

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Override css style on local component css file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related