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

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?

Start by tracing the styles for the w-md-editor-text div, the textarea, and the --md-editor-font-family variable to find where they are defined and mounted. Check the existing component API and documentation for customization hooks. Done should provide a reliable documented way to control the rendered text area's font family and size.