MERN项目中用Tailwind CSS修改预构建编辑器组件样式的可选方案

因为TinyMCE的UI元素是它自身动态渲染到DOM中的（通常不在你的组件DOM结构内），所以没法直接通过组件的className直接覆盖这些.tox开头的类样式。不过可以用以下方式把样式和组件放在一起，不用单独的CSS文件：

方案1：组件内嵌入Tailwind风格样式块 #

在你的React组件里直接添加一个<style>标签，用Tailwind的@layer和@apply指令来写样式，这样样式和组件同文件，符合你想集中管理的需求：

export default function YourTextEditor() {
  return (
    <>
      {/* 你的TinyMCE编辑器组件 */}
      <Editor />

      <style>{`
        @layer utilities {
          .tox.tox-silver-sink.tox-tinymce-aux {
            @apply z-[100000] !important;
            /* 后续调整颜色可以用Tailwind工具类，比如： */
            /* @apply bg-gray-50 text-gray-900 border-gray-200; */
          }
        }
      `}</style>
    </>
  );
}

方案2：给编辑器加包裹容器，用后代选择器定位 #

如果担心全局选择器污染，可以给编辑器加一个自定义类的容器，再通过选择器精准定位（注：部分TinyMCE元素会渲染到body下，可能需要用兄弟选择器或全局定位，视实际DOM结构调整）：

export default function YourTextEditor() {
  return (
    <div className="custom-tinymce-wrapper">
      {/* 你的TinyMCE编辑器组件 */}
      <Editor />
    </div>

    <style>{`
      @layer utilities {
        .custom-tinymce-wrapper ~ .tox.tox-silver-sink.tox-tinymce-aux {
          @apply z-[100000] !important;
          /* 颜色调整示例 */
          /* @apply bg-white hover:bg-gray-50; */
        }
      }
    `}</style>
  );
}

说明：@layer utilities会让这些样式被Tailwind的优先级系统管理，@apply则能直接复用Tailwind的预设工具类，既保持了Tailwind的使用习惯，又不用单独维护CSS文件。

内容的提问来源于stack exchange，提问作者Drail