How to prevent theme from styling data tables?

When using a theme for an html output, such as LUX, and creating tables with DT's datatable function, the theme stylizes the output tables, including capitalizing the column names.

Here is the Yaml

---
title: "Untitled"
format: html
editor: visual
theme: LUX
---

And here is an example

library(DT)

datatable(head(iris), extensions = 'Buttons', caption = "Companies Summary",options=list(
  dom = 'Bfrtip',
  buttons = c('csv', 'excel'),
  initComplete = JS(
    "function(settings, json) {",
    "$(this.api().table().container()).css({'font-size': '70%'});","}")))

column names capitalized, corresponding to the html theme

In the example above, the font changes according to the theme, however the font size and the buttons size in the whole table and everything around it are responding to the command

table().container()).css({'font-size': '70%'})

except for the column names which are behaving according to the theme.

The ideal look I am looking for is to simply prevent the theme from stylizing the tables produced by datatables. or at least control the specific behavior of the theme and prevent it from styling the column names:

column names unchanged, no theme in the yaml

I tried controlling headers with

table().header()).css({'font-size': '70%'})

but the problem remains.

I am sure it will come down to customizing the theme, however, I don't know html and css. Any help is appreciated.

Solution

A possible solution to the problem could be using a custom.scss to overwrite the CSS property defined by the theme.

---
title: "Untitled"
format: html
theme: [lux, custom.scss]
---


```{r}
library(DT)

datatable(head(iris), extensions = 'Buttons', caption = "Companies Summary",options=list(
  dom = 'Bfrtip',
  buttons = c('csv', 'excel'),
  initComplete = JS(
    "function(settings, json) {",
    "$(this.api().table().container()).css({'font-size': '70%'});",
    "}")))
```

custom.scss

/*-- scss:rules --*/
table.dataTable th {
  text-transform: unset;
}