如何在Docusaurus中修改Logo尺寸？已尝试CSS调整仍未解决

以下是几种能解决你问题的方案，按优先级尝试：

1. 直接在配置文件中设置高度 #

打开项目根目录的docusaurus.config.js，找到themeConfig.navbar.logo配置项，直接添加height属性：

module.exports = {
  // ...其他配置
  themeConfig: {
    navbar: {
      logo: {
        alt: '你的Logo描述',
        src: '/img/logo.png', // 你的Logo路径
        height: '36px', // 这里设置你想要的高度
      },
    },
  },
};

修改后重启Docusaurus服务（npm run start），这个方法优先级最高，能直接覆盖默认样式。

2. 用自定义CSS强制覆盖样式 #

如果配置项设置后仍不生效，说明默认CSS权重更高，需要在src/css/custom.css中添加更精准的选择器：

/* 精准定位Logo图片，覆盖默认样式 */
.navbar__brand img {
  height: 36px !important;
  width: auto; /* 自动保持宽高比，避免变形 */
}

如果还是不行，试试更高权重的选择器：

.navbar--fixed-top .navbar__brand > img {
  height: 36px;
  width: auto;
}

3. 处理SVG Logo的特殊情况 #

如果你的Logo是SVG格式，可能因为自身的viewBox属性导致高度不生效，可以在CSS中添加preserveAspectRatio属性：

.navbar__brand img {
  height: 36px;
  width: auto;
  preserveAspectRatio: xMidYMid meet; /* 保持SVG的比例适配 */
}

最后提醒：修改后一定要重启开发服务，避免缓存导致样式不更新。

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