CSS selector for font color in flextable with shadow host on

Question

I'm unsuccessfully trying to set the font color for flextable generated in r markdown using a css stylesheet.

I can accomplish this when I turn off shadow host, but not with it on. (Just turning it off removes other desirable features.) Here's a short r markdown file demonstrating the difference.

---
title: "Untitled"
output: html_document
---

<style>
div.flextable-shadow-host * {
  color: pink;
}

div.tabwid * {
  color: pink;
}

</style>

# ignores CSS above

```{r, echo=FALSE}
library(flextable)
flextable(head(mtcars))
```

# accepts CSS above

```{r, echo=FALSE}
ft <- flextable(head(mtcars))
htmltools_value(ft, ft.shadow = FALSE)
```

I want the css external to the r code because I have a button selector on the website the user can change the overall style (eg, dark mode or not).

Answer 1

When using shadow , the table is assembled outside of HTML. Only the id connects the table to HTML. However, flextable has functions for setting the color. Why not just use one of the many built-in methods to change the color?

For example:

# ignores CSS above

```{r liberator,include=F}
library(flextable)
library(tidyverse)

```

```{r tbler, echo=FALSE}

flextable(head(mtcars)) %>% 
  color(color = "pink", part = "all")

```

# accepts CSS above

```{r, echo=FALSE}
ft <- flextable(head(mtcars))
htmltools_value(ft, ft.shadow = FALSE)
```

There are many things you can do with flextable styling. You can see more customization options here .