将不同的 CSS 样式应用于 R Shiny 中的框元素

Question

我有一个应用程序，我希望 main_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)

当前状态：

所需的最终状态：

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 有。