fix theme styles after using scpoed md styles

Author: csr632

packages/theme-doc/src/Layout/FileText/index.tsx

@@ -5,9 +5,10 @@ import CodeBlock from '../MDX/CodeBlock'
 export interface Props {
   syntax: Language
   text: string
+  className?: string
 }
 
-export function FileText({ syntax, text }: Props) {
+export function FileText({ syntax, text, className }: Props) {
   if (typeof text !== 'string') {
     return (
       <pre>{`FileText Error: <FileText> component receives invalid props.
@@ -16,5 +17,11 @@ If you use it in markdown, you should use it exactly like "<FileText src="./file
 `}</pre>
     )
   }
-  return <CodeBlock className={`language-${syntax}`} children={text} />
+
+  return (
+    <CodeBlock
+      className={[`language-${syntax}`, className].filter(Boolean).join(' ')}
+      children={text}
+    />
+  )
 }

packages/theme-doc/src/Layout/MDX/index.tsx

@@ -40,8 +40,8 @@ const components: MDXComponents = {
   }),
   CodeBlock,
   Demo,
-  TsInfo,
-  FileText,
+  TsInfo: withMdClassName(TsInfo),
+  FileText: withMdClassName(FileText),
   a: (props: React.HTMLProps<HTMLAnchorElement>) => {
     const { href, ...rest } = props
     if (href?.startsWith('/')) {
@@ -117,13 +117,13 @@ const MDX: React.FC<React.PropsWithChildren<any>> = ({ children }) => {
 export default MDX
 
 /**
- * Only "FlowContent" elements need to have .markdown-el className
- * because they are top-level elements under the root
- * https://github.com/syntax-tree/mdast#flowcontent
- *
+ * We only need to add ".markdown-el" className to top-level block elements under the markdown root.
  * our github-markdown-light.css will add markdown style to markdown-el and all its descendants
+ *
+ * Ref: "FlowContent" are the top-level block elements in mdast
+ * https://github.com/syntax-tree/mdast#flowcontent
  */
-function withMdClassName(Component: React.FC | string) {
+function withMdClassName(Component: React.FC<any> | string) {
   return function (props: any) {
     const { className } = props
     const newClassName = className ? `${className} markdown-el` : 'markdown-el'

packages/theme-doc/src/Layout/TsInfo/index.tsx

@@ -5,12 +5,15 @@ import s from './index.module.css'
 
 interface Props {
   data: TsInfoData
+  className?: string
 }
 
-export function TsInfo({ data }: Props) {
+export function TsInfo({ data, className: _className }: Props) {
+  const className = [_className, s.table].filter(Boolean).join(' ')
+
   if (data.type === 'interface' || data.type === 'object-literal') {
     return (
-      <table className={s.table}>
+      <table className={className}>
         <thead>
           <tr>
             <th>Name</th>
@@ -47,7 +50,7 @@ export function TsInfo({ data }: Props) {
 
   if (data.type === 'other') {
     return (
-      <table className={s.table}>
+      <table className={className}>
         <thead>
           <tr>
             <th>Name</th>