react-md-editor
react-md-editor copied to clipboard
Styling issue with Remix app
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?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).