使用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)