Adding :visited tags SPFX

Question

I'm trying to create a simple web part to become more familiar with SPFX, and I have the following block for displaying my list of icons.

From render:

<div class="${ styles.sizing }">
  <a class="fab fa-facebook-square ${ styles.faCustom } ${ styles.facebook } ${ fbVar }" href="${escape(this.properties.fbLink)}">&nbsp;</a>
  <a class="fab fa-twitter ${ styles.faCustom } ${ styles.twitter } ${ tVar }" href="${escape(this.properties.twitterLink)}">&nbsp;</a>
  <a class="fab fa-linkedin ${ styles.faCustom } ${ styles.linkedin } ${ liVar }" href="${escape(this.properties.linkedinLink)}"></a>
  <a class="fab fa-youtube ${ styles.faCustom } ${ styles.youtube } ${ ytVar }" href="${escape(this.properties.instagramLink)}"></a>
  <a class="fab fa-instagram ${ styles.faCustom } ${ styles.instagram } ${ inVar }" href="${escape(this.properties.instagramLink)}"></a>
</div>`;

Output:

The problem is that Twitter (after being clicked) changed to the purple color from a :visited tag. I've tried to add the visited tag both directly to the a link above and through

.twitter{
  color: #1DA1F2;

  &:visited{
   color: #1DA1F2;
  }
}

In both cases, the default :visited class is being applied (and I'm not seeing my visited tags through the inspect tool). What am I missing to get this to apply properly?

Answer 1

Try adding "!important" to your styles to override any styles that might override yours. (Assuming they have not also been marked as "!important".)

.twitter{
  color: #1DA1F2 !important;

  &:visited{
   color: #1DA1F2 !important;
  }
}