javascript - MDX 将样式应用于错误的元素（next-mdx-remote 中的 MDX）

Question

我有两个组件，ItemA& ItemB：

项目A：

const ItemA = ({ color }) => {

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

B项：

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

我在 MDX 文件中使用这些next-mdx-remote. ItemA 用于内联，ItemB 在任何文本之外：

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 />

我现在希望我的 ItemAs 是彩色的（红色和蓝色），而我的 ItemBs 是黑色/无样式的。但是，我的 ItemB 正在按顺序接管我的 ItemAs 的样式：

当我将 ItemAs 移动到文本上方（并且不要内联使用它们）时，一切正常：

<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 />

我还注意到，当我将divItemA 中的最外层变为 aspan时，即使 ItemA 内联使用，事情也会再次按预期工作：

但是，我不知道为什么以及罪魁祸首可能是什么？是next-mdx-remote吗？还是mdx一般来说？