Shinydashboard::box 标题中的 shinyWidget::dropdownButton 样式

Question

背景

我正在尝试将shinyWidget::dropdownButton 放在shinydashboard::box 的标题中。该按钮应具有使用可折叠框时创建的按钮的外观和感觉 (box(..., collapsible = TRUE).

在一些 JavaScript 的帮助下，我能够移动下拉列表，在我看来，这比我自己构建所有 HTML 更简单。

下面的代码做了我想做的事情，但是我正在努力解决css，因为下拉列表中的元素部分是白底白字（我猜这是有道理的，因为它们是 @ 类的（大）孩子987654330@)

我想要什么

我希望下拉列表中的所有控件看起来就像我将下拉列表放在框体中一样：

目标： 在正文中下拉

现状： 标题中的下拉菜单

问题

我怎样才能做到这一点？我必须使用哪些css 规则，以确保任何类型的控件看起来都像是在盒子的主体中？我可以更轻松地实现相同的行为吗？ （例如，通过将我的所有控件包装在另一个元素的下拉列表中）？我确实了解css 的基础知识，但在这里我感到有点不知所措，我需要考虑哪些规则才能达到预期的结果。

---

代码

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

makeDropDown <- function(i) {
  dropdownButton(
    h3("Heading"),
    selectInput(paste0("sel", i), "Select:", LETTERS),
    downloadButton(paste0("down", i), "Load"),
    circle = FALSE,
    icon = icon("cog")
  )
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    box(solidHeader = TRUE,
        status = "info",
        title = "Box",
        div(
          makeDropDown(1),
          class = "box-tools pull-right",
          id = "moveme"
        ),
        makeDropDown(2)
    )
  )
)

server <- function(input, output, session) {
  runjs("$('.box-header').append($('#moveme').detach())")
}

shinyApp(ui, server)

Answer 1

你是对的，一些 CSS 规则被覆盖了，你可以使用一些带有 !important 的内联 CSS 来控制外观：

makeDropDown <- function(i) {
  dropdownButton(
    tags$div(
      style = "color: black !important;", # for text
      h3("Heading"),
      selectInput(paste0("sel", i), "Select:", LETTERS),
      downloadButton(
        outputId = paste0("down", i), label = "Load", 
        style = "background-color: #f4f4f4 !important; color: #444 !important; border: 1px solid #ddd !important;" # for button
      )
    ),
    circle = FALSE,
    icon = icon("cog")
  )
}

要不然，也许@DivadNojnarg 在shinydashboardPlus 有更好的解决方案，我去问问他！