如何为Notion编辑页注入样式类？DOM受控渲染致修改被回滚

你遇到的问题是Notion的受控DOM渲染机制会回滚所有手动修改的class属性，控制台的警告也说明了这一点：

4536-03e8b1b293f00187a4d8.js:1   NOTION WARNING  Reverting mutation of attribute class from "notion-selectable notion-text-block" -> "notion-selectable notion-text-block" in component undefined MutationRecord

下面是几种绕开这个限制的可行方法：

• 基于现有属性写CSS选择器
  不用添加自定义class，直接通过Notion元素自带的属性（比如data-block-id、data-type，或者自带的class组合）定位元素。比如要给特定文本块加样式，先在开发者工具里复制它的data-block-id，然后写：

  [data-block-id="abc123-def456-ghi789"] {
    background: #f0f9ff;
    padding: 3px 6px;
    border-radius: 4px;
  }
  

  这种方式完全不修改DOM，自然不会被Notion的机制回滚。

• 用浏览器扩展注入高优先级CSS
  用Stylus、Tampermonkey这类扩展，把你的自定义样式注入到Notion页面。针对通用元素的样式可以这么写：

  .notion-heading-1-block {
    color: #dc2626 !important;
    font-family: 'Inter', sans-serif !important;
  }
  

  加!important是为了覆盖Notion的内联样式，确保你的样式能生效。

• 用MutationObserver实时应用内联样式
  如果需要给动态生成的元素（比如新创建的块）加样式，可以用MutationObserver监听DOM变化，直接给元素设置内联样式：

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.classList?.contains('notion-toggle-block')) {
          node.style.marginLeft = '16px';
          node.style.color = '#4b5563';
        }
      });
    });
  });
  
  observer.observe(document.body, { childList: true, subtree: true });
  

  虽然Notion偶尔会回滚style属性，但Observer会立刻重新应用，用户基本感知不到延迟。

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