Any possible to apply default className for table jsx in mdx?

[JounQin]

https://codesandbox.io/p/devbox/ecstatic-curie-nvw927?file=%2Fdocs%2Fhello.mdx%3A7%2C18

When using <table> in .md(with rehype-raw), it will add class automatically with

rspress/packages/theme-default/src/layout/DocLayout/docComponents/table.tsx

Lines 3 to 37 in 5612c87

	export const Table = (props: ComponentProps<'table'>) => {
	return (
	<table
	{...props}
	className="block border-collapse text-base my-5 overflow-x-auto leading-7 border-gray-light-3 dark:border-divider"
	/>
	);
	};
	export const Tr = (props: ComponentProps<'tr'>) => {
	return (
	<tr
	{...props}
	className="border border-solid transition-colors duration-500 even:bg-soft border-gray-light-3 dark:border-divider"
	/>
	);
	};
	export const Td = (props: ComponentProps<'td'>) => {
	return (
	<td
	{...props}
	className="border border-solid px-4 py-2 border-gray-light-3 dark:border-divider"
	/>
	);
	};
	export const Th = (props: ComponentProps<'th'>) => {
	return (
	<th
	{...props}
	className="border border-solid px-4 py-2 text-text-1 text-base font-semibold border-gray-light-3 dark:border-divider"
	/>
	);
	};

But in .mdx, no default class will be added, and we can not access Table component from @rspress/theme-default easily in .mdx files.

---

We're using <table> jsx instead Markdown syntax because we need rowspan support.

[Timeless0911]

https://rspress.dev/guide/advanced/custom-theme#2-use-slot
You can use components to customize below MDX components yourself.

{
	h1: H1,
	h2: H2,
	h3: H3,
	h4: H4,
	h5: H5,
	h6: H6,
	ul: Ul,
	ol: Ol,
	li: Li,
	table: Table,
	td: Td,
	th: Th,
	tr: Tr,
	hr: Hr,
	p: P,
	blockquote: Blockquote,
	strong: Strong,
	a: A,
	code: Code,
	pre: Pre,
	img: Img,
}

[JounQin]

It seems theme folder is required to be created on users' side. #901

It's weird that why they are not used in default theme? 🤔

---

Besides, can we export theses components directly instead?

rspress/packages/theme-default/src/layout/DocLayout/docComponents/index.tsx

Lines 13 to 37 in 5612c87

	export function getCustomMDXComponent() {
	return {
	h1: H1,
	h2: H2,
	h3: H3,
	h4: H4,
	h5: H5,
	h6: H6,
	ul: Ul,
	ol: Ol,
	li: Li,
	table: Table,
	td: Td,
	th: Th,
	tr: Tr,
	hr: Hr,
	p: P,
	blockquote: Blockquote,
	strong: Strong,
	a: A,
	code: Code,
	pre: Pre,
	img: Img,
	};
	}

// current
import { getCustomMDXComponent } from '@rspress/theme-default'

const { H1 } = getCustomMDXComponent()

// expected
import { H1 } from '@rspress/theme-default'

[JounQin]

rspress/packages/theme-default/src/layout/DocLayout/index.tsx

Lines 60 to 68 in 5612c87

	const mdxComponents = { ...getCustomMDXComponent(), ...components };
	const docContent = (
	<TabDataContext.Provider value={{ tabData, setTabData }}>
	<MDXProvider components={mdxComponents}>
	<Content />
	</MDXProvider>
	</TabDataContext.Provider>
	);

I believe they have already been provided in default theme?

[JounQin]

OK, I found mdx-js/mdx#2549, it's also strange <table> in .md works as expected.

We're still sticked on @mdx-js/[email protected], seems a different issue.

[Timeless0911]

It is the right behaviour of both mdx-js and mdx-rs. If you want to use raw <table>, you should write inline css styles yourself in mdx file. And if you want to use components, you should write md tables of GFM

[JounQin]

I write a small remark plugin to support jsx table in .mdx like html table in .md.

export const remarkJsxTable: Plugin<[], Root> = () => (ast) => {
  visit(ast, 'mdxJsxFlowElement', (node) => {
    if (
      node.name &&
      ['table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td'].includes(
        node.name,
      ) &&
      node.data?._mdxExplicitJsx
    ) {
      delete node.data._mdxExplicitJsx
    }
  })
}