Why does shinyFeedback overwrite custom CSS?

Question

Goal:
In my app, the user is supposed to upload a .csv file. If a file other than .csv is uploaded, a warning message (showFeedbackWarning()) should appear around the the fileInput() widget. If the user corrects his input and uploads a .csv file, the message should disappear again (hideFeedback()). All this already works in the app. But now I would like to change the colour of the progress bar in fileInput() to another colour for example red (like in this example). However, the warning message should still appear in its default colour orange.

Problem:
shinyFeedback overwrites my custom CSS and the colour of the progress bar is not changed. I can of course use !important, but then the colour of the bar in the warning message also turns red and I don't want this.

Do any of you know how to solve this problem?

Reprex:

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)

score 1 · Accepted Answer · answered Oct 26 '21 at 10:46

We can use shinyjs to change the color dynamically:

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)

Why does shinyFeedback overwrite custom CSS?

1 Answers1