Impossible to choose an element or to add a class or an id

[Nadran20]

Subject of the issue

Impossible to choose an element or to add a class or an id. I try to change the elements of the containers, and/or add a class or an id but nothing happens, it always becomes a simple div.

Your environment

• OS: Windows 10
• Packages: react-markdown: ^6.0.0, remark-directive: ^1.0.1
• Env: node: v12.20.0, yarn: v1.22.10

Steps to reproduce

my code :

import React, { useEffect, useState } from 'react';
import ThemeProvider from '../../utils/theme/theme';
import { ThemeContext } from 'styled-components';
import ReactMarkdown from 'react-markdown';
import Directive from 'remark-directive';

const Page = () => {
    const theme = React.useContext(ThemeContext);
    let { id, document,language,region }:ParamsPath = useParams();
    const [content, setContent] = useState<string>();

    useEffect(() => {
        fetch(`/data/${region}/${language}/${id}/${document}.MD`)
            .then((response) => {
                if (response.ok) return response.text();
                else return Promise.reject("Didn't fetch text correctly");
            })
            .then((text) => {
                setContent(text);
            })
            .catch((error) => console.error(error));
    });

    return (
        <ThemeProvider>
            <PageContainer theme={theme}>
                <MarkdownStyle>
                    {content && <ReactMarkdown remarkPlugins={[Directive]} skipHtml={true} children={content}></ReactMarkdown>}
                </MarkdownStyle>
            </PageContainer>
        </ThemeProvider>
    );
}

interface ContentProps {
    theme: object;
}

export default Page;

Expected behavior

my markdown file :

:::article{.one}

:p{#myId}foo

:::

result in my app :

<article class='one'>
    <p id='myId'>foo</p>
</article>

Actual behavior

<div>
    <p>foo</p>
</div>

[ChristianMurphy]

Please see the guide in the readme on how to use directives https://github.com/remarkjs/remark-directive#use And see https://github.com/remarkjs/react-markdown/issues/585#issue-871290173 for an example with react-markdown. You need to define how you want to transform directives to HTML/React components.