Tengo dos componentes, ItemA y ItemB :

Artículo A:

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

Artículo B:

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

Los uso en archivos MDX con next-mdx-remote . ItemA debe usarse en línea, ItemB fuera de cualquier texto:

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

Ahora esperaría que mis ItemA sean de color (rojo y azul), y que mis ItemB sean negros/sin estilo. Sin embargo, mis ItemB están asumiendo los estilos de mis ItemA, en orden consecutivo:

Cuando muevo ItemAs sobre el texto (y no los uso en línea), las cosas funcionan bien:

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

También noté que cuando convierto el div más externo en ItemA en un span , las cosas vuelven a funcionar como se esperaba, incluso cuando ItemA se usa en línea:

Sin embargo, no tengo idea de por qué y cuál podría ser el culpable. ¿Es next-mdx-remote ? ¿O solo mdx en general?