如何修改Shiny应用中navbarPage链接的悬停与选中文字颜色？

你之前用的.navbar-default是Bootstrap 3的类名，但你的Shiny应用用了bs_theme（属于bslib包），默认使用Bootstrap 5，所以这个类名不生效。针对Bootstrap 5的navbar标签，需要用对应的选择器来修改悬停和选中状态的文字颜色：

正确的CSS代码 #

/* 导航标签悬停时的文字颜色 */
.navbar-nav .nav-link:hover {
  color: #ff69b4 !important; /* 粉色，可自行调整色值 */
}

/* 导航标签选中时的文字颜色 */
.navbar-nav .nav-link.active {
  color: #ff0000 !important; /* 红色，可自行调整色值 */
}

修改后的完整Shiny代码 #

ui <- tagList(
  fluidPage(
    titlePanel(""),
    tags$head(tags$style(HTML(
      "
        /* 导航标签悬停时的文字颜色 */
        .navbar-nav .nav-link:hover {
          color: #ff69b4 !important;
        }
        
        /* 导航标签选中时的文字颜色 */
        .navbar-nav .nav-link.active {
          color: #ff0000 !important;
        }
      "
    ))),
    navbarPage(
      windowTitle = "App Name",
      theme = bs_theme(bootswatch = "flatly",
                       base_font = font_google("Lato"),
                       primary = "#333F50",
                       bg = "white",
                       fg = "#D67540"),
      title = "I am the title",
      selected = "Main Tab 1",
      tabPanel(title = "Main Tab 1",
               fluidPage(
                 sidebarLayout(
                   sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
                   mainPanel(textOutput(outputId = "text_output"))
                 )
               )
      ),
      tabPanel(title = "Main Tab 2",
               fluidPage(
                 fluidRow(
                   column(7,
                          navlistPanel(
                            tabPanel("Tab 1"),
                            tabPanel("Tab 2"),
                            tabPanel("Tab 3"),
                            widths = c(2, 10),
                            well = FALSE)
                   ))
               )
      )
    )
  )
)

server <- function(input, output){
  output$text_output <- renderText(input$text_input)
}

shinyApp(ui, server)

说明 #

• 用.navbar-nav .nav-link确保选择器优先级足够，覆盖bs_theme的默认样式，必要时加!important强制生效
• 你可以自行替换#ff69b4（粉色）和#ff0000（红色）为你需要的色值

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