Styling issue with Remix app

[raivatshah]

Hi @jaywcjlove!

I'm trying to use this library on my remix react app. I tried importing the updated CSS file, i.e.import @uiw/react-md-editor/dist/mdeditor.css; but my CSS still does not load well.

I'm just trying to setup the basic demo:

import React from "react";
import MDEditor from "@uiw/react-md-editor";
// No import is required in the WebPack.
import "@uiw/react-md-editor/dist/mdeditor.css";

const mkdStr = `
# Markdown Editor

---

**Hello world!!!**

[![](https://avatars.githubusercontent.com/u/1680273?s=80&v=4)](https://avatars.githubusercontent.com/u/1680273?v=4)

\`\`\`javascript
import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';

\`\`\`
`;

export default function LiveEditor() {
  const [value, setValue] = React.useState(mkdStr);
  return (
    <div className="container">
      <h3>Auto</h3>
      <MDEditor height={200} value={value} onChange={(val) => {if (val) setValue(val)}} />
      <h3>Light</h3>
      <div data-color-mode="light">
        <MDEditor height={200} value={value} onChange={(val) => {if (val) setValue(val)}} />
      </div>
      <h3>Light</h3>
      <div data-color-mode="dark">
        <MDEditor height={200} value={value} onChange={(val) => {if (val) setValue(val)}} />
      </div>
    </div>
  );
}

I'm guessing this might be due to serverDependenciesToBundle: [/^(?!.*(jsdom|fluent-ffmpeg)).*$/] (see remix.config.js).

Codesandbox of the math setup (but the idea is the same, it doesn't seem to get the styling in this server side framework).

[raivatshah]

I managed to fix some of the issue by:

import externalStyles from "@uiw/react-md-editor/markdown-editor.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: externalStyles}
]

inside my <LiveEditor> component file. However, the changes I make in the editor aren't visible in the preview! Could this have something to do with the CSS?