CSS flextable 中带有阴影主机的字体颜色选择器

Question

我尝试使用 css 样式表为 r markdown 中生成的 flextable 设置字体颜色，但没有成功。

我可以在关闭影子主机时完成此操作，但不能在打开时完成。（只需将其关闭即可删除其他需要的功能。）这是一个简短的 r markdown 文件，展示了差异。


---
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)
```

我想要 r 代码外部的 css，因为我在网站上有一个按钮选择器，用户可以更改整体样式（例如，是否使用深色模式）。

Answer 1

当使用shadow时，table在HTML之外组装。只有 id 将 table 连接到 HTML。但是，flextable 具有设置颜色的功能。为什么不使用众多 built-in 方法中的一种来更改颜色？

例如：

# 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)
```

您可以使用 flextable 样式做很多事情。 You can see more customization options here.

更新：根据您的评论

好的，这可以改变 flextable.

的颜色

This works if there is only one flextable in the script.

我将文本颜色设置为 #b21E29（红色阴影）。您可以根据需要进行更改。

这些将跳过 non-shadow `flextables`

在您的 RMD 脚本中的任何地方添加这个块。这不需要额外的库或 R 代码中的任何其他自定义。

```{r js_ing,results="asis",engine="js",echo=F}
// extract the styles that are set for the flextable
letMe = document.querySelector('div.flextable-shadow-host').shadowRoot.querySelector('div>style');

// replace color style
// preceding ';' so that 'background-color' doesn't change
letMe.innerHTML = letMe.innerHTML.replace(/;(color:.+?);/g, ';color:#b21e29 !important;');                
```

如果您有多个 flextable 带有阴影，您可以使用以下两个块之一代替。在第一个——都是相同的颜色；第二个--每个 table 都有不同的颜色。

These work if there is more than one flextable in the script.

注意评论，这样您就可以根据需要的输出了解使用什么。

所有颜色相同：

```{r moreJs_ing,results="asis",engine="js",echo=F}
// collect all of the flextables with shadow
letMe = document.querySelectorAll('div.flextable-shadow-host');

// to set all shadow flextables to the same font color:
for(i = 0, n = letMe.length; i < n; i++){
  showMe = letMe[i].shadowRoot.querySelector('div>style');
  showMe.innerHTML = showMe.innerHTML.replace(/;(color:.+?);/g, ';color:#b21e29 !important;');
}
```

每个都有自己的颜色：

```{r evenMoreJs_ing,results="asis",engine="js",echo=F}
//alternatively to set each to a different color
// make sure you only include one of these options!

// collect all of the flextables with shadow
letMe = document.querySelectorAll('div.flextable-shadow-host');

// first table in script
showFirst = letMe[0].shadowRoot.querySelector('div>style');
showFirst.innerHTML = showFirst.innerHTML.replace(/;(color:.+?);/g, ';color:#b21e29 !important;');

// second table in script
showSecond = letMe[1].shadowRoot.querySelector('div>style');
showSecond.innerHTML = showSecond.innerHTML.replace(/;(color:.+?);/g, ';color:#003b70 !important;');


// change the indices for each table, keep in mind the first table is [0], not [1]
```

如果您不确定要使用这些，请将所有三个和 include=F 作为块选项添加到您当时不使用的两个中。

CSS flextable 中带有阴影主机的字体颜色选择器

CSS selector for font color in flextable with shadow host on

css

r

flextable

更新：根据您的评论

这些将跳过 non-shadow flextables

这些将跳过 non-shadow `flextables`