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

Question

我有一个应用程序，我希望 main_box expand/contract 图标为白色背景的黑色文本，然后 sub_box 的选项框出现红色与白色字母。此外，我希望 sub_box 的选项框保持红色和白色字母，即使在悬停或单击时也是如此。

我能够正确实现 sub_box css，但我无法弄清楚如何将 sub_box css 从 main_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 有。

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

Applying different CSS styles to box elements in R Shiny

css

r

shiny

shinydashboardplus