Styling Issue within React.

[DaRabus]

Hey Guys,

I tried a lot of things out and moved the component out of every thinkable style and even tried using the Chrome/Firefox CSS tools, but i just can't get it to a proper fit in any way. the Toolbar is horizontal somehow and also the text field is not changeable in the width...

My other components are MUI based styled so basically nothing which should interfere with

I removed now any styling for showing it.

What do i do wrong..

[jaywcjlove]

https://codesandbox.io/embed/markdown-editor-for-react-izdd6?fontsize=14&hidenavigation=1&theme=dark

You can give me an example using https://codesandbox.io to reproduce your error.

@DaRabus

[DaRabus]

Can't really reproduce it with Sandbox, i will try further with my project.

But is there some docs how i can style proper the single components, like the toolbar and the textfield by itself, cause the css doesnt apply on the parts if i put it on the "Editor"

@jaywcjlove

[jaywcjlove]

I don't understand your question.
@DaRabus

[jaywcjlove]

You have to reproduce your problem before I can help you.

[roshan521]

@DaRabus are you now able to use custom css?

[DaRabus]

@roshan521 I actually found this alternative which works with the styling.

https://github.com/HarryChen0506/react-markdown-editor-lite

[roshan521]

@DaRabus looks sick bro thanks 👍

[jaywcjlove]

@DaRabus @roshan521 https://github.com/uiwjs/react-markdown-editor

[jaywcjlove]

react-md-editor/core/src/index.less

Lines 3 to 79 in f7047fa

	.@{md-editor} {
	text-align: left;
	border-radius: 3px;
	padding-bottom: 1px;
	position: relative;
	color: var(--color-fg-default);
	box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
	0 1px 1px var(--color-border-default);
	background-color: var(--color-canvas-default);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	.copied {
	display: none !important;
	}
	&-content {
	position: relative;
	border-radius: 0 0 3px 0;
	height: calc(100% - 39.1px);
	}
	&-input {
	width: 50%;
	height: 100%;
	}
	&-text-pre > code {
	word-break: break-word !important;
	white-space: pre-wrap !important;
	}
	&-preview {
	width: 50%;
	box-sizing: border-box;
	box-shadow: inset 1px 0 0 0 var(--color-border-default);
	position: absolute;
	padding: 10px 20px;
	overflow: auto;
	top: 0;
	right: 0;
	bottom: 0;
	border-radius: 0 0 5px 0;
	display: flex;
	flex-direction: column;
	// word-break: break-word !important;
	// white-space: pre-wrap !important;
	.anchor {
	display: none;
	}
	.contains-task-list {
	list-style: none;
	}
	}
	&-show-preview &-input {
	width: 0%;
	overflow: hidden;
	background-color: var(--color-canvas-default);
	}
	&-show-preview &-preview {
	width: 100%;
	box-shadow: inset 0 0 0 0;
	}
	&-show-edit &-input {
	width: 100%;
	}
	&-show-edit &-preview {
	width: 0%;
	padding: 0;
	}
	&-fullscreen {
	overflow: hidden;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}
	&-fullscreen &-content {
	height: 100%;
	}
	}

[jaywcjlove]

https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-md-editor/file/markdown-editor.css

[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>
  );
}

Do you have an idea of perhaps how I can fix this?