將不同的 CSS styles 應用於 R Shiny 中的框元素

Question

我有一個應用程序，我希望 main_box 展開/收縮圖標為白色背景的黑色文本，然后 sub_box 的選項框顯示為紅色和白色字母。 此外，我希望 sub_box 的選項框保持紅色和白色字母，即使在懸停或單擊時也是如此。

我能夠正確實現 sub_box css，但我不知道如何從 main_box css 中分解 sub_box css。誰能告訴我我做錯了什么？

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(HTML("
.box.box-solid > .box-header > .box-tools .btn {
  background: #fd0000;
  color: #ffffff;
}
")),
box(title = "main_box", collapsible = T,
    box(title = "sub_box",
        dropdownMenu = dropdown(label = "Options",
                                "Hello World!")
    )
)
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

當前State：

期望結束 State：

Answer 1

區分這些框的一種簡單方法是為它們提供一個id - 請參閱以下內容：

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

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(
      HTML(
        "#subbox > .box-header > .box-tools .btn {
       background: #fd0000;
       color: #ffffff;
       }"
      )
    ),
    shinydashboardPlus::box(
      id = "mainbox",
      title = "main_box",
      collapsible = TRUE,
      shinydashboardPlus::box(
        id = "subbox",
        title = "sub_box",
        dropdownMenu = dropdown(label = "Options", "Hello World!")
      )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

此外，請確保解決名稱空間問題。 shinydashboard::box沒有dropdownMenu參數 - shinydashboardPlus::box有。