EditorJS深色主题下工具栏按钮Hover样式修改失效求助

核心问题分析 #

你的CSS样式不生效，大概率是选择器优先级不足或者没有针对深色主题的上下文编写样式。EditorJS的默认样式会有更具体的选择器，或者切换深色主题时会给容器添加专属类，你的样式没有匹配这个上下文，导致被覆盖。

具体解决步骤 #

1. 锁定深色主题上下文 #

首先确认EditorJS切换深色主题时，根容器（比如body或编辑器外层div）添加的类名，常见的是.dark或.ce-dark。然后将你的样式嵌套在这个类下，确保只在深色主题生效：

/* 替换.dark为实际的深色主题类名 */
.dark .ce-toolbar__plus {
  color: white;
}

.dark .ce-toolbar__plus:hover {
  color: black;
  background-color: grey;
}

/* 四点按钮（设置按钮）的样式 */
.dark .ce-toolbar__settings-btn {
  color: white;
}

.dark .ce-toolbar__settings-btn:hover {
  color: black;
  background-color: grey;
}

2. 提升选择器优先级 #

如果上述方法仍不生效，说明默认样式的选择器优先级更高。可以通过增加选择器的特异性来覆盖：

/* 结合body和深色类，提升优先级 */
body.dark button.ce-toolbar__plus {
  color: white !important;
}

body.dark button.ce-toolbar__plus:hover {
  color: black !important;
  background-color: grey !important;
}

body.dark button.ce-toolbar__settings-btn {
  color: white !important;
}

body.dark button.ce-toolbar__settings-btn:hover {
  color: black !important;
  background-color: grey !important;
}

这里用button.ce-toolbar__plus是因为按钮本质是<button>元素，比单纯的类选择器优先级更高。

3. 用开发者工具定位冲突样式 #

打开浏览器开发者工具（F12），选中按钮元素，查看「样式」面板：

• 找到被划掉的自定义样式，看哪个默认样式在覆盖它
• 复制那个默认样式的选择器，然后在你的CSS里用同样的选择器（或更具体的）编写样式，确保优先级更高

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