使用bslib与page_navbar的Shiny App中页面样式标签的正确放置

问题根源是page_navbar()的主参数区域只允许放置nav_panel()/nav_menu()这类导航相关组件，直接塞tags$style属于不符合预期的内容，所以触发警告。以下两种方法可以完美解决：

方法1：利用page_navbar的header/footer参数 #

把自定义CSS放到page_navbar()的header或footer参数里，这两个参数专门用来放置全局内容，不会触发导航容器的警告：

library(shiny)
library(bslib)

ui <- page_navbar(
  theme = bs_theme(version = 5),
  # 正常定义导航面板
  nav_panel("首页", "这里是首页内容"),
  nav_panel("数据展示", "这里是数据展示内容"),
  # 把CSS样式放到header参数中
  header = tags$style(
    "
    /* 自定义导航栏标题颜色 */
    .navbar-brand {
      color: #2E8B57 !important;
      font-weight: bold;
    }
    /* 自定义激活状态的导航链接样式 */
    .nav-link.active {
      background-color: #F0FFF0 !important;
      border-radius: 4px;
    }
    "
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

方法2：在page_navbar外层用tagList包裹样式 #

如果你的自定义CSS代码较多，也可以把tags$style放在page_navbar()外面，用tagList()把样式和导航页面包裹起来，逻辑更清晰：

library(shiny)
library(bslib)

ui <- tagList(
  # 先放自定义CSS样式
  tags$style(
    "
    .navbar {
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .nav-link {
      margin: 0 8px;
    }
    "
  ),
  # 再定义导航页面
  page_navbar(
    theme = bs_theme(version = 5),
    nav_panel("首页", "首页内容"),
    nav_panel("设置", "设置内容")
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

两种方法都能让CSS正常生效，同时彻底消除控制台的警告。

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