如何修改Shiny应用中shinydashboardPlus手风琴菜单的字体颜色

问题需求 #

需要复刻目标手风琴效果：

• 将手风琴标题字体改为黑色（原使用.box-title的CSS无效）
• 为每个手风琴项的内容区域添加带圆角边框的白色容器

解决思路 #

1. 修正标题颜色选择器：shinydashboardPlus的手风琴标题对应的类是.accordion-title，替换原错误的.box-title选择器
2. 添加内容容器样式：针对手风琴内容区域.accordion-body设置白色背景、圆角边框，同时调整内边距增强视觉效果

修改后完整代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("
        /* 设置手风琴标题为黑色 */
        .accordion-title {
          color: black !important;
        }
        
        /* 为内容区域添加白色圆角容器 */
        .accordion-body {
          background-color: white;
          border-radius: 6px;
          padding: 12px;
          border: 1px solid #e5e5e5;
          margin-top: 8px;
        }
        
        /* 可选：优化手风琴项整体外观 */
        .accordion-item {
          margin-bottom: 10px;
          border-radius: 6px;
          border: 1px solid #eee;
        }
        
        .accordion-header {
          background-color: #f8f8f8;
          border-radius: 6px 6px 0 0;
        }
      ")
    )
  ),
  accordion(
    id = "covenants",
    accordionItem(
      title = "Cash on cash",
      status = "danger",
      collapsed = TRUE,
      "This is some text!"
    ),
    accordionItem(
      title = "Net Portfolio Yield Percentage",
      status = "warning",
      collapsed = TRUE,
      "This is some text!"
    ),
    accordionItem(
      title = "Minimum Liquidity Amount",
      status = "warning",
      collapsed = TRUE,
      "This is some text!"
    ),
    accordionItem(
      title = "Maximum Debt to Equity Ratio",
      status = "warning",
      collapsed = TRUE,
      "This is some text!"
    ),
    accordionItem(
      title = "Most Favored Nation",
      status = "warning",
      collapsed = TRUE,
      "This is some text!"
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

样式说明 #

• .accordion-title：精准定位手风琴标题元素，通过!important覆盖默认样式，确保标题显示为黑色
• .accordion-body：为内容区域添加白色背景、圆角边框和内边距，模拟需求中的白色容器效果
• 额外添加的.accordion-item和.accordion-header样式用于优化整体视觉层次，可根据实际需求调整或移除

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