No se puede eliminar el subrayado de la sobreindicación del enlace.

He estado luchando tratando de eliminar la subrayado de todos los enlaces de forma global en mi proyecto de NextJS.

He intentado tanto con CSS (importando el archivo globals.css en _app.tsx) como con ChakraUI.

La única forma en la que puedo hacerlo funcionar es mediante el uso de:
<link style="{{" textdecoration:="" "none"="" }}=""> pero no quiero usarlo en más de 100 enlaces 🙂

¿Alguna idea?

_app.tsx

import "../styles/globals.scss";
...

const theme = extendTheme({
  global: {
    a: {
      _hover: {
        textDecoration: "none",
      },
    },
  },
  breakpoints,
  fonts: {
    heading: "Poppins",
    body: "Poppins",
  },

  textStyles: {
    h1: {
      // you can also use responsive styles
      fontSize: ["48px", "72px"],
      fontWeight: "bold",
      lineHeight: "110%",
      letterSpacing: "-2%",
    },
    h2: {
      fontSize: ["36px", "48px"],
      fontWeight: "semibold",
      lineHeight: "110%",
      letterSpacing: "-1%",
    },
    h3: {
      fontSize: ["36px", "48px"],
      fontWeight: "semibold",
      lineHeight: "110%",
      letterSpacing: "-1%",
    },
    h4: {
      fontSize: ["14px", "18x"],
      fontWeight: "semibold",
      lineHeight: "110%",
      letterSpacing: "-1%",
      textTransform: "uppercase",
    },
  },
  components: { Input: { baseStyle: { _focus: { boxShadow: "none" } } } },
});

function MyApp({ session, Component, pageProps, country, flag }) {
  return (
    <apolloprovider client="{client}">
      <chakraprovider theme="{theme}">
        <sessionprovider session="{session}">
          <component {...pageprops}="" country="{country}" flag="{flag}"></component>
        </sessionprovider>
        <scrollbutton></scrollbutton>
      </chakraprovider>
    </apolloprovider>
  );
}
export default MyApp;

globals.scss:

a:-webkit-any-link {
  text-decoration: none;
}

a:hover -webkit-any-link {
  text-decoration: none;
}