如何为自定义组件中的HTML标签应用Docusaurus主题样式？

问题原因 #

Docusaurus解析MDX里的原生<details>标签时，会自动把它替换成主题内置的Details组件，这个组件会自动注入主题样式需要的类名。但你自定义的Solution组件直接用了原生<details>元素，没经过Docusaurus的组件转换流程，所以不会带上那些样式类，导致和原生details的样式不一致。

解决方法 #

方法1：复用Docusaurus内置的Details组件（推荐） #

直接导入主题提供的Details组件来封装你的Solution组件，这样能自动继承主题样式：

import Details from '@theme/Details';

export default function Solution({children}) {
  return (
    <Details summary="Solution">
      {children}
    </Details>
  );
}

之后在MDX中使用<Solution>组件时，就会和原生<details>拥有完全一致的主题样式。

方法2：手动添加样式类（不推荐） #

如果一定要用原生<details>元素，可以把原生details上的样式类手动复制到自定义组件中：

export default function Solution({children}) {
  return (
    <details className="details_node_modules-@docusaurus-theme-common-lib-components-Details-styles-module isBrowser_node_modules-@docusaurus-theme-common-lib-components-Details-styles-module alert alert--info details_node_modules-@docusaurus-theme-classic-lib-theme-Details-styles-module">
      <summary>Solution</summary>
      {children}
    </details>
  );
}

注意：这种方法的样式类名和Docusaurus的打包路径绑定，后续升级框架可能会导致类名变化，需要同步更新，所以优先选方法1。

内容的提问来源于stack exchange，提问作者Mar H.