在使用bslib的Shiny应用中自定义DT::datatable选中行样式失败求助

问题背景 #

我尝试在Shiny应用中为DT::datatable添加自定义CSS样式，希望用户选中表格行时，该行变为黄底黑字，替代默认的蓝底白字。不使用bslib包时可以成功实现该效果，但使用bslib主题时，相同方法无法生效，尝试bslib::bs_add_rules函数也未能解决问题。

无bslib时的成功代码 #

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)

使用bslib时的失败代码 #

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)

解决方案 #

问题根源在于bslib主题会为DT表格添加额外的CSS类（如dt-select-table），导致原有CSS选择器优先级不足，无法覆盖默认样式。以下是两种可行的解决方法：

方法一：使用更精确的CSS选择器并嵌入到tags$head #

即使使用bslib主题，直接在tags$head中添加样式仍能生效，只需调整选择器以匹配bslib下DT表格的类结构：

library(shiny)
library(bslib)

ui <- page_fluid(
  theme = bs_theme(),
  tags$head(
    tags$style(
      HTML("table.dataTable.dt-select-table tbody tr.selected td {
             color: black !important;
             background-color: 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)

方法二：通过bs_add_rules使用精确选择器 #

如果坚持使用bs_add_rules，需要将CSS选择器修改为更精确的版本，确保优先级高于bslib默认样式：

library(shiny)
library(bslib)

ui <- page_fluid(
  theme = bs_add_rules(
    bs_theme(),
    sass::as_sass(".dt-select-table tbody tr.selected td {
             color: black !important;
             background-color: 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)

说明 #

• 替换box-shadow为background-color是更直接的背景色设置方式，效果一致且更直观。
• 必须保留!important以强制覆盖bslib的默认样式规则。

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