如何让Tiptap Editor呈现Material-UI TextField的外观？

一、匹配Material-UI TextField的外观与边框样式 #

Tiptap本身是无样式的富文本编辑器，可通过自定义CSS精准对齐Material-UI TextField的视觉风格，以下分两种变体给出实现方案：

1. 适配Outlined（轮廓）变体 #

给Tiptap外层容器添加自定义类，通过CSS复刻MUI OutlinedTextField的边框、圆角及交互状态：

/* 容器基础样式 */
.tiptap-mui-outlined {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  padding: 16px 14px;
  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1);
}

/* 编辑器内容区域重置 */
.tiptap-mui-outlined .ProseMirror {
  outline: none;
  min-height: 40px;
}

/* Hover状态 */
.tiptap-mui-outlined:hover {
  border-color: rgba(0, 0, 0, 0.87);
}

/* Focus状态 */
.tiptap-mui-outlined:focus-within {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* 浮动Label样式（可选，完全匹配MUI逻辑） */
.tiptap-mui-outlined .tiptap-label {
  position: absolute;
  top: 16px;
  left: 14px;
  background-color: #fff;
  padding: 0 4px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  transition: all 200ms cubic-bezier(0.0, 0, 0.2, 1);
  pointer-events: none;
}

.tiptap-mui-outlined:focus-within .tiptap-label,
.tiptap-mui-outlined:not(:empty) .tiptap-label {
  top: -8px;
  left: 8px;
  font-size: 0.75rem;
  color: #1976d2;
}

2. 适配Standard（标准）变体 #

针对下划线样式的TextField，同样通过自定义类实现对齐：

/* 容器基础样式 */
.tiptap-mui-standard {
  position: relative;
  padding: 6px 0 7px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1);
}

/* 编辑器内容区域重置 */
.tiptap-mui-standard .ProseMirror {
  outline: none;
  min-height: 28px;
}

/* Hover状态 */
.tiptap-mui-standard:hover {
  border-bottom-color: rgba(0, 0, 0, 0.87);
}

/* Focus状态 */
.tiptap-mui-standard:focus-within {
  border-bottom-color: #1976d2;
  box-shadow: 0 1px 0 0 #1976d2;
}

/* 浮动Label样式（可选） */
.tiptap-mui-standard .tiptap-label {
  position: absolute;
  top: 6px;
  left: 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  transition: all 200ms cubic-bezier(0.0, 0, 0.2, 1);
  pointer-events: none;
}

.tiptap-mui-standard:focus-within .tiptap-label,
.tiptap-mui-standard:not(:empty) .tiptap-label {
  top: -20px;
  font-size: 0.75rem;
  color: #1976d2;
}

组件使用示例（React） #

import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

const MuiStyledTiptap = ({ variant = 'outlined', label }) => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '',
  });

  const containerClass = variant === 'outlined' ? 'tiptap-mui-outlined' : 'tiptap-mui-standard';

  return (
    <div className={containerClass}>
      <span className="tiptap-label">{label}</span>
      <EditorContent editor={editor} />
    </div>
  );
};

二、将Tiptap嵌入Material-UI TextField #

无法直接替换TextField的原生输入区域，但可通过MUI支持的InputComponent属性，将Tiptap作为自定义输入组件嵌入TextField，实现视觉和交互的统一：

实现代码（React） #

import { TextField } from '@mui/material';
import { EditorContent, useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { useRef, useEffect, useState } from 'react';

const TiptapInput = ({ inputRef, value, onChange, ...props }) => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: value || '',
    onUpdate: ({ editor }) => {
      onChange({ target: { value: editor.getHTML() } });
    },
  });

  // 同步编辑器实例到TextField的inputRef，处理focus/blur逻辑
  useEffect(() => {
    if (inputRef && editor) {
      inputRef.current = editor.view.dom;
    }
  }, [inputRef, editor]);

  return <EditorContent editor={editor} {...props} />;
};

const TiptapInTextField = () => {
  const [content, setContent] = useState('');
  const inputRef = useRef(null);

  return (
    <TextField
      label="富文本输入"
      variant="outlined"
      value={content}
      onChange={(e) => setContent(e.target.value)}
      InputComponent={(props) => (
        <TiptapInput inputRef={inputRef} {...props} />
      )}
      sx={{
        // 调整内边距避免内容被挤压
        '& .MuiOutlinedInput-input': {
          padding: 0,
          minHeight: '40px',
        },
      }}
    />
  );
};

关键注意事项 #

• 状态同步：Tiptap输出HTML格式内容，需根据业务需求决定是否转换为纯文本存储
• 交互对齐：可通过监听TextField的onFocus/onBlur事件，调用editor.focus()/editor.blur()同步状态
• 样式兼容：需覆盖TextField默认输入区域的padding等样式，避免Tiptap内容被截断

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