如何覆盖Docusaurus默认样式并禁用其自带头部导航栏

方案1：官方配置直接禁用头部（最推荐，无多余DOM） #

直接修改项目根目录下的docusaurus.config.js配置文件，在themeConfig字段下将navbar设置为false即可完全关闭头部渲染，无需额外样式修改：

// docusaurus.config.js
module.exports = {
  // 其他配置项
  themeConfig: {
    // 新增/修改这一行即可
    navbar: false,
    // 其他themeConfig配置
  }
}

修改后重启开发服务，头部会直接不生成到DOM结构中，是性能最好的实现方式。

方案2：自定义CSS样式隐藏（兼容自定义主题场景） #

如果因为使用了第三方自定义主题导致配置项不生效，可以通过全局自定义CSS覆盖内置样式：

1. 打开项目下的src/css/custom.css文件（如果不存在则新建）
2. 加入以下样式代码：

/* 隐藏默认头部 */
.navbar {
  display: none !important;
}
/* 移除默认给body加的头部占位padding */
body {
  padding-top: 0 !important;
}
/* 调整文档侧边栏的顶部定位，避免出现空白缺口 */
.theme-doc-sidebar-container {
  top: 0 !important;
}

Docusaurus默认会优先加载自定义CSS文件的样式，配合!important可以100%覆盖内置样式，不需要修改依赖包源码。

方案3：JS硬移除（极端场景Hack方案） #

如果前面两种方案都不生效，可以通过注入全局脚本直接在DOM加载后移除头部元素：
修改docusaurus.config.js的scripts配置项，加入内联脚本：

// docusaurus.config.js
module.exports = {
  // 其他配置项
  scripts: [
    {
      innerHTML: `
        document.addEventListener('DOMContentLoaded', () => {
          const navbar = document.querySelector('.navbar');
          navbar && navbar.remove();
          document.body.style.paddingTop = 0;
        });
      `
    }
  ]
}

通用样式覆盖技巧：所有Docusaurus内置元素都有固定的语义化类名，你可以通过浏览器开发者工具选中对应元素拿到类名，直接在src/css/custom.css中写对应样式即可覆盖，不需要修改node_modules中的依赖源码。

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