R Shinydashboard 为状态参数添加自定义颜色

Question

所以我的问题与这个非常相关:R shinyDashboard customize box status color

然而，问题在于所提供的解决方案并没有添加可用的颜色，而只是替换了现有的颜色。因此，我们在一个 Shiny 的应用程序中仅限于 5 种颜色的盒子。换句话说，我想在保留现有颜色的同时添加自定义颜色

所以我想了一个类似的解决方案，但它没有用......

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        tags$style(HTML("
                        .box.box-solid.box-primary2>.box-header {
                        color:#fff;
                        background:#666666
                        }

                        .box.box-solid.box-primary2{
                        border-bottom-color:#666666;
                        border-left-color:#666666;
                        border-right-color:#666666;
                        border-top-color:#666666;
                        }

                        ")),
        fluidRow(
            box(width = 6, title = "youhou", status = "primary2", solidHeader = TRUE,
                "Box content"
            )
        )
        )
    )


server <- function(input, output) {}

shinyApp(ui, server)

Error in validateStatus(status) : Invalid status: primary2. Valid statuses are: primary, success, info, warning, danger.

Answer 1

下面是一个hacky的方法。基本上你需要创建一个自定义 div 并使用它的 id标记以便 css样式优先于原始框样式并使用 renderUI生成这个新的自定义框。

但是，您也不想无意中为其他人设置样式 box所以你使用 id将样式专门应用于您的 box选择。

最后你使用 uiOutput和 renderUI在服务器端创建这个新 div和相应的样式框。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(

      box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
          "Box content"
      ),

      uiOutput("primary2")
    )
  )
)


server <- function(input, output) {

  output$primary2 <- renderUI({
    tags$div(class = "another-box", id = "primariy2",
    box(width = 6, title = "youhou", status = "primary", solidHeader = TRUE,
        "Box content"
    ),
    tags$style(HTML("
                        #primariy2 .box.box-solid.box-primary>.box-header {
                        color:#fff;
                        background:#666666
                        }

                        .box.box-solid.box-primary {
                        border-bottom-color:#666666;
                        border-left-color:#666666;
                        border-right-color:#666666;
                        border-top-color:#666666;
                        }

                        ")) 
  )

  })

}