mdx - How can I apply Docusaurus theme to HTML tags in custom component - Stack Overflow

admin管理员组

文章数量:1406924

I have created a simple custom component to display an HTML details element with a predefined summary:

export default function Solution({children}) {
    return (
        <details>
            <summary>Solution</summary>

                {children}
        </details>
    )
}

However, when using this component in an mdx file, the theme is not applied to the details element:

import Solution from "./Solution";

<details>
    <summary>Solution</summary>

        Solution text goes here.
</details>

<Solution>
    Solution text goes here.
</Solution>

results in the following:

Inspecting the corresponding HTML elements reveals that the first top-level details element has the class attribute 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 (which I assume is responsible for the style), whereas the other one (coming from the Solution component) doesn't.

To be honest I am not sure what to try, since I am quite new to Docusaurus. I couldn't find any hint in the Docusaurus documentation. Also, I couldn't find an issue on Github.

本文标签： mdxHow can I apply Docusaurus theme to HTML tags in custom componentStack Overflow