假设您正在使用@next/mdx和@mdx-js/react，您可以通过Anchor组件中的href prop访问href prop。
1.实现样式化链接组件：

// components/mdx/Anchor.tsx

import * as React from "react";

export default function Anchor({
  href,
  children,
  ...rest
}: React.JSX.IntrinsicElements["a"]) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferer noopener"
      className="text-blue-600 my-4 text-base"
      {...rest}
    >
      {children}
    </a>
  );
}

1.将带有自定义链接组件的MDXProvider添加到_app.tsx：

// pages/_app.tsx

import * as React from "react";
import { AppProps } from "next/app";
import { MDXProvider } from "@mdx-js/react";

import Anchor from "@/components/mdx/Anchor";
import "@/styles/globals.css";

const components = {
  a: Anchor,
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <MDXProvider components={components}>
      <Component {...pageProps} />
    </MDXProvider>
  );
}

1.在next.config.js中设置@next/mdx：

// next.config.js

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    providerImportSource: "@mdx-js/react",
  },
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
};

module.exports = withMDX(nextConfig);

沙盒-https://codesandbox.io/p/sandbox/stackoverflow-76283549-h1fkf9?file=%2Fcomponents%2Fmdx%2FAnchor.tsx