突出显示R Reactable的排序头已经具有默认的背景标头样式？

Question

从这里 (参见高亮排序标题)中，我看到了如何突出显示排序头。如果标题已经有背景颜色，是否可以修改此方法以突出显示排序的标题列。

高亮排序标题-没有默认背景阴影(作品)

library(shiny)
library(reactable)

ui <- fluidPage(
  theme = "test.css",
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              defaultColDef = colDef(
              
                # Use css to style the header of the sorted column
                headerClass = "sort-header")
    )
  })
}

shinyApp(ui, server)

高亮显示排序标题-默认背景阴影(失败)

library(shiny)
library(reactable)

ui <- fluidPage(
  theme = "test.css",
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(iris,
              defaultColDef = colDef(
                headerStyle = list(background = "#00FF00"),
                
                # Use css to style the header of the sorted column
                headerClass = "sort-header")
    )
  })
}

shinyApp(ui, server)

test.css

.sort-header[aria-sort="ascending"],
.sort-header[aria-sort="descending"] {
  background: rgba(255, 0, 0, 1);
}

Answer 1

Reactable的作者这里回答

确保默认样式和排序样式的css具有相同的优先级。

R脚本

ui <- fluidPage(
  includeCSS("sort_column.css"),
  reactableOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderReactable({
    reactable(
      iris[1:5, ],
      defaultColDef = colDef(headerClass = "table-header"),
      bordered = TRUE
    )
  })
}

shinyApp(ui, server)

sort_column.css

/* Header style: Unsorted */
.table-header {
  background: rgba(0, 100, 0, 1);
}

/* Header style: Sorted */
.table-header[aria-sort="ascending"],
.table-header[aria-sort="descending"] {
  background: rgba(100, 0, 0, 1);
}