Font size

[aleksandrmakarov-dev]

I'm developing app with Next.js and want to make font size inside markdown editor bigger. I added styles to globals.css

.w-md-editor-text-pre > code,
.w-md-editor-text-input {
  font-size: 2rem !important;
  line-height: 2.5rem !important;
}

Imported globals.css to page where I have MDEditor
And I have an issue, the size of font doesn't change although, if I select text, selected text is the size I set in styles

In browser's console I can see that styles are applied

[jaywcjlove]

@aleksandrmakarov-dev https://codesandbox.io/s/markdown-editor-for-react-forked-mgw84m?file=/index.css:0-145

.w-md-editor-text-input,
.w-md-editor-text-pre > code,
.w-md-editor-text-pre {
  font-size: 2rem !important;
  line-height: 2.5rem !important;
}

[aleksandrmakarov-dev]

@jaywcjlove thank you for the answer! I tried these styles, but still have the problem. It might be that some other styles override your styles. It is strange that in browser developers menu I don't see anything that could override styles. I will check everything one more time

[nNBee]

I have the same issue... have you find any solution?

[zounar]

The only way I was able to achieve this is to include the style directly above the MDEditor component. Also needed to set .code-line to block since the line-height was not actually applied.

<style jsx global>{`
.w-md-editor-text-input, .w-md-editor-text-pre .code-line {
    font-size: 1.3rem !important;
    line-height: 1.3rem !important;
}

.w-md-editor-text-pre .code-line {
    display: block;
}
`}</style>
<MDEditor 
  ... other props
/>

Note that both font-size and line-height must be set for it to work properly.

[nNBee]

Thanks @zounar