使用bslib在Shiny應用程式中自訂DT::datatable的CSS

Question

我正在嘗試將自訂 CSS 樣式應用於閃亮應用程式中的 DT::datatable。當使用者選擇表中的一行時，我希望所選行為黃色、黑色文本，而不是預設的藍色、白色文本。當我還使用 bslib 套件時，我無法成功完成此操作。

（這裡提出了類似的問題，但我無法回答，正如我將在下面描述的那樣）。

沒有bslib，我可以成功套用css，如下所示：

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

但是，我發現使用 bslib 主題，我無法使用相同的方法來應用 css。

我已經看到這兩個資源指向使用 bslib::bs_add_rules 函數來解決此問題：

• https://github.com/rstudio/bslib/issues/360
• 使用 bslib 時覆寫 DT 預設選擇顏色

基於這些，我嘗試了以下變體，但似乎無法使其工作：

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

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)