如何在R Shiny中修改navbarPage菜单栏的背景颜色

我刚好之前也折腾过Shiny navbar的样式，给你分享下精准的CSS选择器，帮你搞定全黑色菜单栏的需求——只改菜单栏背景，不碰字体和页面主体样式：

核心CSS代码 #

/* 基础navbar整体背景+去掉默认灰色边框 */
.navbar-default {
  background-color: #000000;
  border-color: #000000;
}

/* 未激活状态的导航项背景 */
.navbar-default .navbar-nav > li > a {
  background-color: #000000;
}

/* 导航项悬停/聚焦时的背景 */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #000000;
}

/* navbar品牌（标题/Logo）区域背景 */
.navbar-default .navbar-brand {
  background-color: #000000;
}

/* 品牌区域悬停时的背景 */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  background-color: #000000;
}

/* 若有下拉菜单，设置下拉容器背景 */
.navbar-default .navbar-nav .open .dropdown-menu {
  background-color: #000000;
}

/* 下拉菜单选项悬停背景 */
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  background-color: #000000;
}

为什么之前的代码无效？ #

你之前用的选择器（比如.navbar-background）不对，Shiny的navbar默认基于Bootstrap的.navbar-default类构建，所有子元素样式都是通过这个类嵌套定义的，必须精准定位这些嵌套选择器才能覆盖默认样式。

在Shiny中使用的方法 #

直接把这段CSS嵌入到Shiny app的ui部分即可，用tags$head()包裹：

ui <- navbarPage(
  "你的页面标题",
  tags$head(
    tags$style(HTML("
      .navbar-default {
        background-color: #000000;
        border-color: #000000;
      }
      .navbar-default .navbar-nav > li > a {
        background-color: #000000;
      }
      .navbar-default .navbar-nav > li > a:hover,
      .navbar-default .navbar-nav > li > a:focus {
        background-color: #000000;
      }
      .navbar-default .navbar-brand {
        background-color: #000000;
      }
      .navbar-default .navbar-brand:hover,
      .navbar-default .navbar-brand:focus {
        background-color: #000000;
      }
    "))
  ),
  tabPanel("Tab 1", "这里是第一个标签页内容"),
  tabPanel("Tab 2", "这里是第二个标签页内容")
)

这样设置后，菜单栏的所有状态（未激活、悬停、品牌区、下拉菜单）都会变成纯黑色，同时完全保留默认字体颜色和页面主体样式，完美匹配你的需求。

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