文档
覆盖 CSS

覆盖 CSS

在下面的演示中,我们创建了额外的 CSS 规则,使编辑器文本和悬停的斜杠菜单项变为蓝色:

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
 
import "./styles.css";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: "You'll see that the text is now blue",
      },
      {
        type: "paragraph",
        content:
          "Press the '/' key - the hovered Slash Menu items are also blue",
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance using a React component.
  // Adds `data-theming-css-demo` to restrict styles to only this demo.
  return <BlockNoteView editor={editor} data-theming-css-demo />;
}
 

在本页中,你将找到主要的选择器,这些选择器对于创建你自己的 CSS 规则非常有用,包括演示中看到的选择器。然而,如果你想针对特定的 DOM 元素,最简单的方法是使用浏览器的开发者工具检查 DOM 树。

BlockNote CSS 类

在编辑器的 DOM 结构中,你会发现许多元素具有 bn- 前缀的类。BlockNote 使用这些类向编辑器应用 CSS 样式,你可以用自己的样式覆盖它们。以下是一些最有用的 BlockNote 类,供你在 CSS 规则中使用:

.bn-container:编辑器的容器元素,以及所有菜单和工具栏的容器。

.bn-editor:仅针对编辑器的元素。

.bn-block:表示一个区块元素,包括嵌套区块。

.bn-block-group:嵌套区块的容器元素。

.bn-block-content:区块内容的元素。

.bn-inline-content:仅表示区块可编辑的富文本内容的元素。

.bn-toolbar:格式化和链接工具栏的元素。

.bn-side-menu:侧边菜单的元素。

.bn-drag-handle-menu:拖动手柄菜单的元素。

.bn-suggestion-menu:建议菜单的元素。

BlockNote CSS 属性

除了类之外,BlockNote 还使用以下属性来定位特定的区块类型和属性:

[data-content-type="blockType"]:区块内容的元素,但只针对类型为 blockType 的区块。

[data-propName="propValue"]:区块内容的元素,但只针对具有值为 propValuepropName 属性的区块。

例如,[data-content-type="heading"][data-level="2"] 会选择所有等级为 2 的标题区块。

Mantine 类

由于 BlockNote 使用 Mantine (opens in a new tab) 作为其 UI 框架,你也可以使用任何默认的 Mantine 组件类来编写 CSS 规则。