Applying different CSS styles to box elements in R Shiny-CodePudding

I have an app in which I would like the main_box expand/contract icon to be in black text with a white background, and then the sub_box's options box to appear in red with white letters. Additionally, I want the sub_box's options box to remain red w/ white letters, even when hovered over or clicked.

I'm able to get the sub_box css implemented correctly, but I can't figure out how to disaggregate the sub_box css from the main_box css. Can anyone tell me what I'm doing wrong?

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)

Current State:

Desired End State:

CodePudding user response：

A simple way to distinguish those boxes is to provide them with an id - please see the following:

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)

Furthermore please make sure to address namespace issues. shinydashboard::box does not have a dropdownMenu parameter - shinydashboardPlus::box has.