覆盖从第三方 JS 片段生成的 a.class 以显示：无； 在 Gatsby JS 网站中

Question

Overriding a.class generated from a third party JS snippet to display: none; in a Gatsby JS site.

Here is what I have thus far, located in the gatsby-browser.js file.

export const onClientEntry = () => {
window.onload = () => {
document.addEventListener('DOMContentLoaded', function (event) {
  document.getElementsByClassName('sc-7dvmpp-1 fprIlH').style.display = 'none';
  });
 };
};

The class I wish to override and display: none;

<a type="link" href="https://example.com" class="sc-7dvmpp-1 fprIlH">Get Icon</a>

Answer 1

You can refer to that .sc-7dvmpp-1.fprIlH class name to any SCSS (or CSS) file, even in CSS-in-JS . Just create a .scss or .css file and add:

.sc-7dvmpp-1 .fprIlH {
   display: none;
}

Import your file using:

import "./yourFileName.css" 

Note: this assumes that your file is in the same directory as your JavaScript component file. Adapt it to your needs.

If the class name it's autogenerated and may change the name, use some kind of pseudoselector like:

a[class^="sc-"] {
  display: none;
}