覆盖 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"]
:区块内容的元素,但只针对具有值为 propValue
的 propName
属性的区块。
例如,[data-content-type="heading"][data-level="2"]
会选择所有等级为 2 的标题区块。
Mantine 类
由于 BlockNote 使用 Mantine (opens in a new tab) 作为其 UI 框架,你也可以使用任何默认的 Mantine 组件类来编写 CSS 规则。