防止动态闪亮CSS文件互相覆盖

我创建了一个Shiny应用程序，允许动态选择Bootswatch themes。动态选择发生在server.R文件中，使用tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "..."))，每个.css文件保存在我的应用程序的www目录中，作为“themename.min.css”。这里有一个小例子：防止动态闪亮CSS文件互相覆盖

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

在这个例子中

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

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

我熟悉shinythemes包，它具有动态主题选择器，但包明确指出此函数仅用于开发，而我想部署我的主题选择器应用程序。我检查了该函数的source code，但我不知道Javascript能够根据我的具体需求进行调整。

来源

2017-07-27 Lauren

它可能只是建议开发，因为你会遇到在现场的缓存问题;因为你的生活网站想要在新的时候保持旧的风格。 –

我能够通过使用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

来源

2017-11-29 15:11:31 Lauren

防止动态闪亮CSS文件互相覆盖

回答

相关问题