当RShiny switchInput在uiOutput中时，它的样式如何？

Question

我以前曾在UI中使用以下样式标记来为来自ShinyWidgets的ShinyWidgets样式设置样式：

#switchInput color while on
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
                                        background: #eef4fa;
                                        color: black;
                                        }'))),
  
  #switchInput color while off
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #fdf1f1;
                                        color: black;
                                        }'))),

但是，现在我已经将开关呈现为uiOutput，然后是renderUI，这些标记似乎没有被识别。

当开关是通过uiOutput生成的，而不是直接放到ui中时，我该如何设计开关的开、关版本呢？

library(shiny)
library(shinyjs)
library(bslib)
library(shinyBS)
library(shinyWidgets)

ui <- fluidPage(
  
  #switchInput color while on
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
                                        background: #eef4fa;
                                        color: black;
                                        }'))),
  
  #switchInput color while off
  tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
                                        background: #fdf1f1;
                                        color: black;
                                        }'))),

  
  fluidRow(
    column(2,
           offset = 5,
           align = "center",
           uiOutput('log_axis_output')
    )),
    

)

server <- function(input, output) {
  
  output$log_axis_output <- renderUI({
    
    switchInput(
      inputId = "log_axis1",
      offLabel = "Log X\naxis?",
      onLabel = "Normal\nX axis",
      value = FALSE,
      offStatus = "success", 
      onStatus = "danger",
      disabled = FALSE)
    
  })

}

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

这不是R码的问题。这是CSS代码的问题所在。

您的CSS选择器没有足够的优先级作为原始样式选择器。

若要修复，请更改为：

    tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
                                       .bootstrap-switch .bootstrap-switch-container .bootstrap-switch-handle-on.bootstrap-switch-danger {
                                        background: #eef4fa;
                                        color: black;
                                        }'))),
    
    #switchInput color while off
    tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
                                       .bootstrap-switch .bootstrap-switch-container .bootstrap-switch-handle-off.bootstrap-switch-success {
                                        background: #fdf1f1;
                                        color: black;
                                        }'))),

我在中间增加了.bootstrap-switch-container以提高特异性水平。了解有关如何计算CSS特异性的更多信息。

另一种方法是使用!important，但通常不推荐使用它。

​

​

​

​