如何修改R Shiny shinydashboard中可折叠box组件的轮廓边框颜色

你可以通过添加自定义CSS覆盖shinydashboard默认的box边框样式，该样式对折叠、展开两种状态的box都生效，无需针对不同状态单独适配。
你之前直接修改元素未生效的原因是shinydashboard的默认样式优先级更高，添加!important属性可强制覆盖原有样式。

具体修改步骤 #

1. 如果你需要全局修改所有box的边框颜色，直接在现有UI的tags$head(tags$style(HTML()))块中加入以下CSS代码即可：

.box {
  /* 可按需调整边框粗细、颜色值，示例为红色边框 */
  border: 2px solid #dd4b39 !important;
}

如果仅需要修改特定box的边框，不想全局生效，可按以下操作：

• 给目标box的参数列表添加class = "custom-red-border"
• 对应CSS代码改为：

.custom-red-border {
  border: 2px solid #dd4b39 !important;
}

2. 修改后的效果参考：

• 折叠状态：
  
• 展开状态：
  

修改后完整示例代码 #

library(shiny)
library(shinydashboard)
library(DT)
library(shinyjs)
library(sodium)
library(plotly)


header <- dashboardHeader(title = "Results", titleWidth=0)
sidebar <- dashboardSidebar(uiOutput("sidebarpanel"), collapsed = TRUE) 
body <- dashboardBody(shinyjs::useShinyjs(), tags$head(tags$style(HTML('.logo {
                              background-color: #334C59 !important;
                              }
                              .navbar {
                              background-color: #334C59 !important;
                              }
                              /* 新增的自定义box边框样式 */
                              .box {
                                border: 2px solid #dd4b39 !important;
                              }
                              '))), uiOutput("body"))
ui<-dashboardPage(header, sidebar, body, skin = "blue", tags$head(
  tags$style(HTML(".main-sidebar {
                  background-color:  #334C59 !important;
                  }
                  .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #F190C5; 
                  }
                  .navbar {
                  height: 60px;
                  min-height:60px !important;
                  }
                  .main-header {
                  max-height: 20px
                  }
                  .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                  background-color: #F190C5;color: white;
                  }
                  .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                  background-color: #334C59;
                  color: rgb(255,255,255);
                  text-align: Center;
                  }
                  
                  "))
)
)

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

  
  output$sidebarpanel <- renderUI({
    if (USER$login == TRUE ){ 
      sidebarMenu(id = "tabs",
                  menuItem("Test", tabName = "Test", icon = icon("dna")),
                  menuItem("Test2", tabName = "Test2", icon = icon("microscope")),
                  menuItem("Test3", tabName = "Test3", icon = icon("microscope"))
      )
    }
  })
  
  output$body <- renderUI({
      tabItems(
        # Second tab
        tabItem(tabName = "Diseases", class = "active",
                fluidRow(
                  column(div(style = "height:25px;"),
                         width = 12, offset = 30,
                         box(
                           title = "Title", collapsible = FALSE, status = "danger", solidHeader = TRUE, collapsed = TRUE,
                           width = 12,
                           box(
                             title = "Subtitle1", collapsible = TRUE, solidHeader = TRUE, collapsed = TRUE, width = NULL,
                             fluidRow(column(width=12, align="left", uiOutput("test1_ui"))),
                             column(width = 12, align = "right",
                                    actionButton(inputId='redirect', label="Learn More", 
                                                 icon = icon("book-medical"), 
                                                 onclick ="window.open('https://google.com', '_blank')"),
                                    actionButton(inputId = 'switchtab', 'More', icon =icon("user")))),
                           box(
                             title = "Subtitle2", collapsible = TRUE, solidHeader = TRUE, collapsed = TRUE, width = NULL,
                             fluidRow(column(width=12, align="left", uiOutput("test3_ui"))),
                             column(width = 12, align = "right",
                                    actionButton(inputId='redirect2', label="Learn More", 
                                                 icon = icon("book-medical"), 
                                                 onclick ="window.open('https://google.com', '_blank')"),
                                    actionButton(inputId = 'switchtab2', 'More', icon =icon("user")))),
                         )
                  )
                ))
      )
      
  })
  

  output$test1_ui <- renderUI({
    tagList("abc")
  })
  output$test3_ui <- renderUI({
    tagList("abc")
  })
  
  observeEvent(input$home2, {
    updateTabItems(session, "tabs", "Test")
  })
  
  observeEvent(input$switchtab, {
    updateTabItems(session, "tabs", "Test2")
  })
  
  observeEvent(input$switchtab2, {
    updateTabItems(session, "tabs", "Test3")
  })
}


shinyApp(ui = ui, server = server)

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