Why my milkdown/react demo displays not like the online demo?

[FaDeAway666]

Seems like style loss

The react component

import { Editor, rootCtx } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { Milkdown, MilkdownProvider, useEditor } from "@milkdown/react";
import { commonmark } from "@milkdown/preset-commonmark";

import "@milkdown/theme-nord/style.css";

const MilkdownEditor = () => {
  useEditor(
    (root) =>
      Editor.make()
        .config(nord)
        .config((ctx) => {
          ctx.set(rootCtx, root);
        })
        .use(commonmark),
    []
  );

  return <Milkdown />;
};

export default function Markdown() {
  return (
    <MilkdownProvider>
      <MilkdownEditor />
    </MilkdownProvider>
  );
}

It displayed like

[FaDeAway666]

the version of packages

"@milkdown/core": "^7.1.1",
"@milkdown/ctx": "^7.1.1",
"@milkdown/preset-commonmark": "^7.1.1",
"@milkdown/prose": "^7.1.1",
"@milkdown/react": "^7.1.1",
"@milkdown/theme-nord": "^7.1.1",
"@milkdown/transformer": "^7.1.1",

[daveteu]

Did u find an answer? I am also not able to see the styling

[daveteu]

I manage to solve it by setting the className manually e.g.

      ctx.update(editorViewOptionsCtx, (prev) => ({
          ...prev,
          attributes: {
            class:
              'ProseMirror prose dark:prose-invert outline-none mx-auto px-2 py-4 box-border milkdown-theme-nord editor',
            spellcheck: 'false',
          },
        }));