如何解决shinyFeedback覆盖自定义CSS导致fileInput进度条颜色设置失效问题

解决方案 #

通过精准的CSS选择器区分文件上传组件的正常、警告两种状态，不需要使用!important强制样式，即可同时满足两种场景的样式需求。

将UI部分的自定义CSS替换为仅针对无警告状态的文件上传进度条的规则即可，完整可运行代码如下：

library(shiny)
library(shinyFeedback)

ui <- fluidPage(
  useShinyFeedback(),
  fileInput(
    inputId = "upload",
    label = "Upload file:",
    accept = ".csv"
  ),
  tags$style("
    /* 仅无警告状态的文件上传进度条显示为红色 */
    .form-group:not(.has-feedback-warning) .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)

实现原理 #

shinyFeedback触发警告时，会自动给fileInput外层的.form-group容器添加.has-feedback-warning类，上面的CSS规则仅匹配没有该警告类的容器下的进度条，因此警告状态下会自动沿用shinyFeedback默认的橙色进度条样式，不会被自定义规则覆盖。

内容的提问来源于stack exchange，提问作者Domi