React中使用Tiptap库：如何为EditorContent添加边框并自定义样式？

我在React中使用Tiptap库时，自定义编辑器区域样式遇到了困难。目前我通过以下代码渲染编辑器：

<EditorContent 
className='editor'
editor={props.editor}/>

我的CSS代码如下：

.editor p{
    margin: 1em 0;
    /* border: 1px solid #000; */
    /* border-radius: 2px; */
}

编辑器不同状态的效果：

• 未点击文本框：
• 点击文本框：

我希望自定义该编辑器的CSS样式，请问有相关参考文档吗？

解决方案参考 #

Tiptap官方有专门的样式定制指南，核心定制方向如下：

1. 基础样式打底：先引入Tiptap核心样式文件（@tiptap/core/dist/style.css）和所用扩展的对应样式（比如段落扩展的@tiptap/extension-paragraph/dist/style.css），在基础样式上做覆盖修改，能减少样式冲突。

2. 容器样式定制：你已经给EditorContent添加了editor类，可通过这个类直接定制编辑器容器的外观，比如：

.editor {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background-color: #fff;
}

3. 节点与状态样式：
   • 针对段落、标题等节点，直接通过类名或元素选择器定制，比如你写的.editor p就是段落样式的修改；
   • 编辑器焦点、选中状态有专属的标识（比如data-selected属性、特定类名），可以针对性写样式：

.editor [data-selected] {
  outline: 2px solid #3b82f6;
  border-radius: 0.25rem;
}

4. 扩展样式调整：如果使用了加粗、代码块等扩展，每个扩展都有对应的样式类名，可参考官方文档中各扩展的样式说明来调整细节。

官方文档的「样式」章节涵盖了从基础到高级的定制方法，包括占位符、滚动条、光标样式等细节的调整方案。

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