I’ve created an SPFx extension (Application Customizer) with the aim to hide the Export to Excel button that shows on SharePoint lists in the Modern and classic experiences.
When debugging – (using gulp serve) it will run the extension properly – I’ve logged this to check. When navigating to a list it will hide the button. If I click on another list, it’s still hidden. But if I navigate to Site Contents for example, and then go back to the list the button reappears. It also looks like the extension itself is no longer activated.

I’ve attempted to use CSS within the associated module.scss file, but it has NO effect:

:global {
  button[data-automationid="exportListCommand"] { //I've also tried other targets instead of ```data-automationid```
    display: none !important;
  }
}

I’ve also tried this to avoid routing issues but it is causing what is described in the subject line:

export default class SiteScriptExtensionV2ApplicationCustomizer
  extends BaseApplicationCustomizer<ISiteScriptExtensionV2ApplicationCustomizerProperties> {
  private loadCustomCss = (): void => {

    if (document.getElementById('item_156a5aeb')) {
      const buttonElement2 = document.getElementById('item_156a5aeb') as HTMLElement
      buttonElement2.style.display = "none"
    }
    if (document.querySelector('button[data-automationid="exportListCommand"]')){
      const buttonElement = document.querySelector('button[data-automationid="exportListCommand"]') as HTMLElement
      buttonElement.style.display = "none"
    }
  }

  public async onInit(): Promise<void> {
    ((history) => {
      const pushState = history.pushState;
      history.pushState = (state, key, path) => {
        pushState.apply(history, [state, key, path]);
        this.loadCustomCss();
      };
    })(window.history);

    window.addEventListener("popstate", (e) => {
      this.loadCustomCss();
    });

    this.loadCustomCss();
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
    await Web(this.context.pageContext.site.absoluteUrl)
      .using(SPFx(this.context))
      .select("AllProperties")
      .expand("AllProperties")()
      .then((r: any) => {
        console.log(r.AllProperties.ExcelExportEnabled, 'r');
      })
    return Promise.resolve();
  }
}

I’ve read this SPFx Application Customizer – hide a <div> and it is related to hiding elements and also mentions that CSS is the best route as Microsoft may change the names to the elements in future. But CSS does not work either.