Question

我创建了一个Shiny应用程序，允许动态选择Bootswatch themes。动态选择使用tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "..."))在server.R文件中进行，每个.css文件都保存在我的应用程序的www目录中，作为＆＃34; themename.min.css。＆＃34;这是一个最小的例子：

library(shiny)

shinyApp(
  ui <- fluidPage(

    # style ui output (changed on server side )
    uiOutput("style"), 

    # navigation toolbar
    navbarPage(id = "navbar",
               title = "Themes",
               position = "fixed-top",
               collapsible = T,
               navbarMenu(title = "Theme Selector",
                          tabPanel("Cosmo", value = "cosmo"),
                          tabPanel("Journal", value = "journal"),
                          tabPanel("Slate", value = "slate"),
                          tabPanel("United", value = "united"))
    )  # END NAVBAR PAGE 
  ),  # END UI

  server <- function(input, output, session){

    # dynamically update bootswatch theme
    output$style <- renderUI({

      # themes 
      themes <- c("cosmo", "journal", "slate", "united")

      # loop through layouts and apply css file accordingly
      for(i in 1:length(themes)){
        if(input$navbar == themes[i]){
          return(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = paste0(themes[i], ".min.css"))))
        }
      }  # END LOOP
    })  # END RENDER UI

  }  # END SERVER
)  # END SHINY APP

所以在这个例子中，我将www目录中的4个主题保存为＆＃34; cosmo.min.css，＆＃34; ＆＃34; journal.min.css，＆＃34;在某种意义上，主题的动态选择工作 - 当用户从导航栏下拉菜单中选择主题时，主题会发生变化。但是，当用户更改主题选择时，某些CSS元素似乎会覆盖其他元素。例如，Slate主题有一个灰色/银色导航栏。选择该主题后，所有后续主题选择都会显示相同的银色导航栏。每个主题单独工作，但动态选择它们会导致问题。

好像using tags$head overwrites certain elements from each CSS file？但我似乎无法在server.R文件中使用includeCSS来使选择动态，但我也不知道如何在ui.R文件中动态选择主题。

我熟悉shinythemes包，它有一个动态主题选择器，但是包明确指出这个函数只用于开发，而我想部署我的主题选择器应用程序。我查看了该功能的source code，但我不知道Javascript能够根据我的具体需求进行定制。

Answer 1

我可以使用includeCSS代替HTML标记来引用样式表来实现此目的。

for(i in 1:length(themes)){
  if(!is.null(input$themes)){
    if(input$themes == themes[i]){
      return(includeCSS(paste0("www/", themes[i], ".css")))
    }
  }
}  # END LOOP

防止动态Shiny CSS文件互相覆盖

1 个答案: