为什么shinyFeedback覆盖自定义CSS？

Question

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

问题：
shinyFeedback会覆盖我的自定义CSS，并且进度条的颜色不会更改。我当然可以使用！重要信息，但警告信息中的条颜色也会变为红色，我不希望出现这种情况。

你们有谁知道如何解决这个问题吗

雷普雷克斯：

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)

Answer 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)