HTML 输出文本不会根据 Shiny 的 CSS 文件而改变

Question

我想在 Shiny 的框中更改某些 html 输出的字体大小。为此，我使用了 CSS 外部文件。一个可重现的示例如下(只需更改 CSS 路径):

library(shiny)

ui <- fluidPage(
  includeCSS("C:/.../trial.css"),

  box(width = 4, title = "This does not change", htmlOutput("text")),
  box(width = 4, title = "basic", "Some text that changes")
)

server <- function(input, output) {

  output$text <- renderUI({
      sentence1 <- paste("<h3>", "<b>", "Something", "</b>", "</h3>")
      sentence2 <- paste("<h3>", "<b>", "Something else", "</b>", "</h3>")
      HTML(paste(sentence1, sentence2, sep = "<br/>"))
  })

}

shinyApp(ui = ui, server = server)

我使用的 CSS 文件是这样指定的:

.box {
    font-family: "Open Sans";
    font-size: 45px;
    color: red;
}

我的问题是，虽然在第二个框中字体大小、系列和颜色发生变化，但在第一个框中只有颜色发生变化，我无法弄清楚为什么。我是否遗漏了一些明显的东西？

Answer 1

如果您直接在 R 控制台中运行 ui，您将看到 ui HTML 结构，如您所见，有一个名为“shiny-html-output”的 div由于这个原因，CSS 在第一个框中的框 div 内反射(reflect)在第二个框中，而不是在第一个框中。

下面的 CSS 将让您访问第一个框

.box {
  font-family: "Open Sans";
  font-size: 45px;
  color: red;
}
h3 {
  font-family: "Open Sans";
  font-size: 45px;
  color: red;
}