更改 tabBox 标题中字体的颜色和大小

Question

虽然我对 CSS 不是很熟悉，但我已经能够将它包含在我的 R 代码中以更改我闪亮应用程序的各种元素。但是，我无法确定需要更改哪个元素才能更改我的 tabBox 标题中字体的颜色和大小，它来自包 shinydashboard。

我的应用程序中的其他框具有深色背景和浅色字体的标题。我已经能够更改 tabBox 标题的背景，使其变暗（见下面的代码），但我没有看到任何元素似乎会影响字体。

我可以使用body 中的font-size 更改选项卡标签的字体大小，或者我可以使用color 更改框中文本的颜色。但是我找不到任何与标题标题本身的属性相关的东西！

感谢您的帮助。

示例代码：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tabBox(title = "Title of box", 
           tabPanel("Tab A"),
           tabPanel("Tab B")),
    tags$head(tags$style(HTML('
                              /* tabBox background */                    
                              .nav-tabs-custom>.nav-tabs {
                              background-color: #2F4858;
                              }
                             '
    )
    )
    )
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Answer 1

查找此类内容的方法是使用右键菜单项“Inspect element”（在 Firefox 中，在其他浏览器中名称相似，但 RStudio 中的内置浏览器不如独立浏览器）。单击标题应位于的位置，它将突出显示，屏幕右侧的面板中会显示许多 CSS 属性。我的节目

在主显示中突出显示标题。从顶部开始，寻找您感兴趣的属性。我在第三组中同时看到了 font-size 和 color。它有一个稍微令人困惑的顶行：AdminLTE.min.css:7 部分表示找到此定义的位置，其余部分 .nav-tabs-custom > .nav-tabs > li.header 是此元素的活动选择器。

所以要更改大小和颜色，请使用该选择器，例如把这个放在你的tabBox:

tags$head(tags$style(HTML('
 /* tabBox background */                    
 .nav-tabs-custom>.nav-tabs {
     background-color: #2F4858;
 }
 .nav-tabs-custom > .nav-tabs > li.header {
     font-size: 40px;
     color: white; 
 }')