Is there a way to reliably overwrite and customize basic CSS styles for this editor?

[florianmartens]

Thanks for developing this editor. It's really cool and straightforward to get something rendered on the page.

I'm struggeling to see where I can customize the editor effectively. I'm currently looking to change the font-family and font-size of the rendered text-area.

The font-size is determined by the div with the className="w-md-editor-text". Unfortunately it has been set with !important and there does not seem to be a way to overwrite this element.

The font-family is set on the <textarea /> element but unfortunately it is set as font-family: var(--md-editor-font-family) !important;

My natural guess would be that the editor would just take a prop to overwrite the css variable. But this does not seem to be the case. The variable also seems to be set upon mouting, so I would need to bend over backwards with an effect to overwrite it. The docs also don't seem to mention anything.

Am I using this library wrong?

[jaywcjlove]

@florianmartens

You can override a style that uses !important by applying a higher specificity. For example, with the following CSS:

div.w-md-editor textarea.w-md-editor-text-input {
  font-family: var(--md-editor-font-family) !important;
}

You can increase the specificity by adding more layers to the selector or combining selectors to give it more priority, even if the original style uses !important.

[santisbon]

The only way that works for me is with these, but it only works on Chrome, Firefox, and Edge. Not Safari. Any suggestions?

.w-md-editor {
  --md-editor-font-family: '...' !important;
}

.wmde-markdown {
  font-family: '...' !important;
}