使用bslib（Bootstrap 5）时如何覆盖DT表格样式？

问题 #

我在使用bslib和DT开发Shiny应用时，想要修改部分数据表格的表头颜色。我找到了几个相关问题：

1. 《Override DT default selection color when using bslib》
2. 《Is there a way to change color of specific DT lines when using bslib and bootstrap5?》
3. 《how to change background and text color of DT Datable header in R Shiny》

第一个问题的解决方案在Bootstrap 4中完全有效，但在Bootstrap 5中无效；第二个问题给出了使用formatStyle搭配"unset"修改单元格样式的临时解决方法，但我无法通过不使用bslib时常用的initComplete参数复现该方法。请问在使用bslib和Bootstrap 5时，是否有办法修改DT的样式？

可复现代码示例：

library(dplyr)
library(shiny)
library(DT)
library(bslib)
library(sass)


ui <- page_fluid(
  theme = bs_theme(
    # version = 4
    version = 5
  ) 
  %>% bs_add_rules(
    as_sass("table.dataTable thead { background: red !important; }")
  ),
  dataTableOutput("dummyDT")
)

server <- function(input, output, session){
  output$dummyDT <- renderDataTable({
    datatable(mtcars)
  })
  
  session$onSessionEnded(function() {stopApp()})
}


shinyApp(ui, server)

解决方案 #

在Bootstrap 5 + bslib的环境下，DT的表头样式优先级和DOM结构有变化，你可以通过以下几种方式解决：

方法1：调整CSS选择器，精确指定表头单元格 #

Bootstrap 5中DT的表头背景样式是直接作用在<th>标签上的，而非<thead>容器，所以需要修改SASS规则的选择器：

ui <- page_fluid(
  theme = bs_theme(version = 5) 
  %>% bs_add_rules(
    as_sass("table.dataTable thead th { 
              background-color: red !important; 
              color: white !important; /* 可选：修改表头文字颜色 */
            }")
  ),
  dataTableOutput("dummyDT")
)

方法2：使用DT的initComplete参数 #

如果要通过initComplete实现，需要注意bslib的样式优先级，在JS中使用明确的样式声明覆盖默认规则：

output$dummyDT <- renderDataTable({
  datatable(
    mtcars,
    options = list(
      initComplete = JS(
        "function(settings, json) {",
        "$(this.api().table().header()).find('th').css({",
        "'background-color': 'red',",
        "'color': 'white'",
        "});",
        "}"
      )
    )
  )
})

方法3：针对特定表格修改样式 #

如果只需要修改某一个表格的表头，可以给表格添加自定义类，再针对性编写CSS规则：

# UI部分给表格加自定义类
dataTableOutput("dummyDT") %>% tagAppendAttributes(class = "custom-dt")

# 主题部分添加对应规则
bs_add_rules(
  as_sass(".custom-dt table.dataTable thead th { 
            background-color: blue !important; 
          }")
)

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