I have two components, ItemA & ItemB:

ItemA:

const ItemA = ({ color }) => {

    return (
            <div
                style={{
                    color: color
                }}>
                Item A
            </div>
    );
};

ItemB:

const ItemB = () => {
    return (
        <div>
            <div>Item B</div>
        </div>
    );
};

I use these in MDX files with next-mdx-remote. ItemA is to be used inline, ItemB outside of any text:

These <ItemA color="red" /> <ItemA color="blue" /> are two item-A components, used inline, that is, within text.  Now let's have a look at the Item-Bs:

<ItemB />
<ItemB />
<ItemB />

I would now expect my ItemAs to be coloured (red & blue), and my ItemBs to be black / unstyled. However, my ItemBs are taking over the styles of my ItemAs, in consecutive order:

When I move the ItemAs above the text (and do not use them inline) things are working fine:

<ItemA color="red" />
<ItemA color="blue" />

These <ItemA color="red" /> <ItemA color="blue" /> are two item-A components, used inline, that is, within text.  Now let's have a look at the Item-Bs:

<ItemB />
<ItemB />
<ItemB />

I have also noticed, that when I turn the outmost div in ItemA into a span, things are working as expected again, even when ItemA is used inline:

However, I have no idea why and what the culprit might be? Is it next-mdx-remote? Or just mdx in general?