Gunakan bslib untuk menyesuaikan CSS DT::datatable dalam aplikasi Shiny

Question

Saya cuba menggunakan gaya CSS tersuai pada DT::datatable dalam apl berkilat. Apabila pengguna memilih baris dalam jadual, saya mahu baris yang dipilih mempunyai teks kuning, hitam dan bukannya teks biru, putih lalai. Saya tidak boleh melakukan ini dengan jayanya apabila saya juga menggunakan pakej bslib.

(Soalan serupa telah ditanya di sini, tetapi saya tidak dapat menjawabnya, seperti yang akan saya terangkan di bawah).

Tanpa bslib, saya berjaya menggunakan css seperti ini:

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 untuk kejayaan

Walau bagaimanapun, saya mendapati bahawa menggunakan tema bslib, saya tidak dapat menggunakan css menggunakan kaedah yang sama.

Saya telah melihat dua sumber ini menunjukkan penggunaan fungsi bslib::bs_add_rules untuk menyelesaikan masalah ini:

• https://github.com/rstudio/bslib/issues/360
• Timpa pilihan warna lalai DT apabila menggunakan bslib

Berdasarkan ini, saya telah mencuba variasi berikut tetapi nampaknya tidak dapat membuatnya berfungsi:

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)

CSS yang tidak berjaya

Answer 1

Masalahnya ialah dengan tag objek. Jika anda menyemak kod HTML, anda akan melihat bahawa apabila anda menggunakan sass::as_sass ia sepatutnya .table.dataTable tbody tr.active td , bukan 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)