動的なシャイニーCSSファイルが互いに上書きされないようにする

Question

私は、Bootswatch themesの動的選択を可能にするシャイニーのアプリを作成しました。動的選択はserver.Rファイルでtags$head(tags$link(rel = "stylesheet", type = "text/css", href = "..."))を使用し、各.cssファイルは "themename.min.css"という名前のwwwディレクトリに保存されます。ここでは、最小限の例です：

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 

は、したがって、この例では、私が「cosmo.min.css、」「journal.min.css」などのように、私のwwwディレクトリに保存された4つのテーマの動的な選択をしていますテーマはで動作します。テーマは、ユーザーがナビゲーションバーのドロップダウンメニューからテーマを選択すると変更されます。しかし、ユーザーがテーマ選択を変更すると、特定のCSS要素が他の要素を上書きするように見えます。たとえば、Slateテーマには灰色/銀色のナビゲーションバーがあります。そのテーマを選択すると、その後のすべてのテーマ選択で同じ銀色のナビゲーションバーが表示されます。各テーマは個別に機能しますが、動的に選択すると問題が発生します。

using tags$head overwrites certain elements from each CSS fileと思われますか？しかし、server.RファイルでincludeCSSを動的に使用することはできませんが、ui.Rファイルでテーマ選択を動的にする方法もわかりません。

私は動的テーマセレクタを持っているshinythemesパッケージに精通していますが、この機能は開発時にのみ使用されると明示的に述べられていますが、私はテーマセレクタアプリケーションを展開します。私はその機能のためにsource codeをチェックアウトしましたが、Javascriptが私の特定のニーズに合わせて調整できるかどうかはわかりません。

Answer 1

HTMLタグの代わりにincludeCSSを使用して、スタイルシートを参照することでこれを達成できました。

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