Highlight R Reactable's sorted headers that already have a default background header style?

Question

From here (See Highlight sorted headers) I see how to highlight sorted headers. Is it possible to modify this method to highlight the sorted header column if there is already a background colour given to the headers?

Highlight Sorted Headers - No Default Background Shading (Works)

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)

Highlight Sorted Headers - With Default Background Shading (Fails)

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

Answered by Reactable's author here

Ensure the css for the default style and sorted style have same priority.

R Script

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);
}