为啥 shinyFeedback 会覆盖自定义 CSS？

Posted 2023-03-24

【中文标题】为啥 shinyFeedback 会覆盖自定义 CSS？

【英文标题】：Why does shinyFeedback overwrite custom CSS?为什么 shinyFeedback 会覆盖自定义 CSS？

【发布时间】：2021-12-11 16:40:55

【问题描述】：

目标： 在我的应用程序中，用户应该上传一个.csv 文件。如果上传了.csv 以外的文件，则fileInput() 小部件周围应出现警告消息(showFeedbackWarning())。如果用户更正他的输入并上传.csv 文件，则该消息应该会再次消失（hideFeedback()）。 所有这些已经在应用程序中运行。但现在我想将fileInput() 中进度条的颜色更改为另一种颜色，例如红色（like in this example）。但是，警告消息仍应以其默认颜色橙色显示。

问题： shinyFeedback 覆盖了我的自定义 CSS，进度条的颜色没有改变。我当然可以使用!important，但是警告消息中的条形颜色也会变成红色，我不想要这个。

你们中有人知道如何解决这个问题吗？

代表：

library(shiny)
library(shinyFeedback)


ui <- fluidPage(
  useShinyFeedback(),
  fileInput(
    inputId = "upload",
    label = "Upload file:",
    accept = ".csv"
  ),
  tags$style(".progress-bar 
             background-color: red;
             "),
  verbatimTextOutput("text")
)


server <- function(input, output, session) 

  data_in <- reactive(
    req(input$upload)
    ext <- tools::file_ext(input$upload$name)

    if (ext == "csv") 
      hideFeedback("upload")
      read.delim(
        input$upload$datapath,
        sep = ";"
      )
     else 
      showFeedbackWarning(
        inputId = "upload"
      )
    
  )

  output$text <- renderPrint(
    class(data_in())
  )



shinyApp(ui, server)

【参考方案1】：

我们可以使用shinyjs来动态改变颜色：

library(shiny)
library(shinyjs)
library(shinyFeedback)

ui <- fluidPage(
  useShinyFeedback(),
  useShinyjs(),
  fileInput(
    inputId = "upload",
    label = "Upload file:",
    accept = ".csv"
  ),
  # tags$style(".progress-bar 
  #            background-color: blue; 
  #            "),
  verbatimTextOutput("text")
)

server <- function(input, output, session) 
  
  data_in <- reactive(
    req(input$upload)
    ext <- tools::file_ext(input$upload$name)
    
    if (ext == "csv") 
      hideFeedback("upload")
      runjs('document.querySelector("#upload_progress > div").style.setProperty("background-color", "green", "important");')
      read.delim(
        input$upload$datapath,
        sep = ";"
      )
     else 
      showFeedbackWarning(
        inputId = "upload",
        color = "red"
      )
    
  )
  
  output$text <- renderPrint(
    class(data_in())
  )



shinyApp(ui, server)