Verwenden Sie bslib, um das CSS von DT::datatable in Shiny-Anwendungen anzupassen

Question

Ich versuche, benutzerdefinierte CSS-Stile auf ein DT::datatable in einer glänzenden App anzuwenden. Wenn der Benutzer eine Zeile in der Tabelle auswählt, möchte ich, dass die ausgewählte Zeile gelben, schwarzen Text anstelle des standardmäßigen blauen, weißen Texts enthält. Ich kann das nicht erfolgreich machen, wenn ich auch das bslib-Paket verwende.

(Eine ähnliche Frage wurde hier gestellt, ich kann sie aber nicht beantworten, wie ich weiter unten beschreibe).

Ohne bslib kann ich das CSS so erfolgreich anwenden:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("table.dataTable tbody tr.selected td {
             color: black !important;
             box-shadow: inset 0 0 0 9999px yellow !important;}"
      )
    )
  ),
  DT::dataTableOutput("test_table")
)

server <- function(input, output, session) {

  output$test_table <- DT::renderDataTable({
    DT::datatable(iris, selection = 'single')
  })
}

shinyApp(ui, server = server)

CSS für den Erfolg

Ich habe jedoch festgestellt, dass ich mit dem bslib-Theme das CSS nicht mit derselben Methode anwenden konnte.

Ich habe diese beiden Ressourcen gesehen, die auf die Verwendung der bslib::bs_add_rules-Funktion zur Lösung dieses Problems hinweisen:

• https://github.com/rstudio/bslib/issues/360
• Überschreiben Sie die DT-Standardfarbauswahl bei Verwendung von bslib

Auf dieser Grundlage habe ich die folgenden Varianten ausprobiert, aber es scheint, dass sie nicht funktionieren:

library(shiny)

ui <- bslib::page_fluid(
  theme = bslib::bs_add_rules(
      bslib::bs_theme(),
      sass::as_sass("table.dataTable tbody tr.selected td {
             color: black !important;
             box-shadow: inset 0 0 0 9999px yellow !important;}"
      )),
  DT::dataTableOutput("test_table")
)

server <- function(input, output, session) {

  output$test_table <- DT::renderDataTable({
      DT::datatable(iris, selection = 'single')
  })
}

shinyApp(ui, server = server)

Fehlerhaftes CSS

Answer 1

问题出在对象标签上。如果您检查 HTML 代码，您会发现当您使用 sass::as_sass 时，它应该是 .table.dataTable tbody tr.active td ，而不是 table。 dataTable tbody tr.selected td

library(shiny)

ui <- bslib::page_fluid(
  theme = bslib::bs_add_rules(
    bslib::bs_theme(),
    sass::as_sass("table.dataTable tbody tr.active td {
             color: black !important;
             box-shadow: inset 0 0 0 9999px yellow !important;}"
    )),
  DT::dataTableOutput("test_table")
)

server <- function(input, output, session) {
  
  output$test_table <- DT::renderDataTable({
    DT::datatable(iris, selection = 'single')
  })
}

shinyApp(ui, server = server)