How to customize CSS props in a preview theme

[mickey58github]

Describe the issue

Hi, I would like to use the Vuepress theme. However, the word break/word wrap is not working as I need it. The Vuepress theme breaks words arbitrarily in the middle, at the end of lines. I think this is controlled by the CSS prop "word-break", which would have to be customized to "word-break: break-word" for all text displayed by MdPreview.

But I don't know how to override such pre-defined CSS props in the theme. I could not even find the CSS for this "vuepress" theme in the source code of md-editor-v3.

Do you have an example for changing CSS props in the theme?

Procedure version

Newest version of md-editor-v3

Reproduction link

No response

[imzbf]

I think you can do something like this: #511 (comment)

Of course, if you want to target a single theme, the selector should be '.md-editor-preview.vuepress-theme p'

In addition, the theme source code can be https://github.com/imzbf/markdown-theme in the repository

[mickey58github]

Thanks, but sorry, I'm not experienced in CSS, so I still don't know where to insert the suggested CSS in my code.

If I understand you correctly, the suggested CSS for fixing the word breaks is this:

.md-editor-preview.vue-press-theme p {
    word-break: break-word;
}

So I put this at the end of my vue file, in SASS syntax, because I use SASS CSS preprocessor:

<style
  lang="sass"
  scoped
>
.md-editor-preview.vuepress-theme p
  word-break: break-word
</style>

But how can I use it with MdEditor?

I tried this:

<MdEditor 
   class="md-editor-preview.vuepress-theme"
   previewTheme="vuepress"
>

And I tried:

<MdEditor 
   class="md-editor-preview"
   previewTheme="vuepress"
>

But none of my attempts have an effect on the word breaks in the preview area.

[mickey58github]

Update: I found a workaround, by modifying the style.css file that ships with md-editor-v3, and importing that modified version of style.css. Not sure though whether that is the officially supported way of doing this.

[imzbf]

No, '.md-editor-preview.vue-press-theme' is the class name in the editor, which will appear when you use the vue-press theme, and does not need to be set manually

<MdEditor 
-   class="md-editor-preview"
   previewTheme="vuepress"
>