使用 Vue.js 覆盖 TinyMCE 下拉列表中 formatselect 的 CSS

Question

我已将tinyMCE编辑器集成到我的Vue.js应用程序中。

:init="{
         height: 800,
         menubar: false,
          inline: true,
         setup: (editor) => {
           editor.on('change keyup undo', function(e) {
            updateValue(editor.getContent())
           })
         },
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount textcolor'
         ],
         toolbar:  field.toolbar || 'undo redo | formatselect | bold italic forecolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"

问题是，当我单击 TinyMCE 编辑器的选项时，说 Paragaph，选项会以某种方式被覆盖，并且标题如图所示。

我尝试添加一些CSS，但我不知道问题是什么。如何修复才能正常显示段落中的标题？

  .mce-content-body {
    height: 100%;
    min-height: 300px;
    padding: 5px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: white;
  }

  .tox-tinymce {
    @extend %formFieldBase;
  }