Shiny R 中的 H1 格式

Question

我正在尝试将标签 H1 的格式设置为绿色 (#00551D) 和粗体，但我无法让它识别格式。

我是 CSS 和 Shiny 的新手，所以我想这很简单，但我无法通过谷歌搜索解决它。

library(shiny)
library(shinydashboard)
library(DT)

title = "EXAMPLE PACK"
tab1 = "KPI'S"
tab2 = "CUSTOMERS"


ui <- dashboardPage(
    dashboardHeader(title=title,titleWidth = 200),
    dashboardSidebar(
      sidebarMenu(
        menuItem(tab1,tabName = "tab1"),
        menuItem(tab2,tabName = "tab2")
      )
    ),
  dashboardBody(
    tabItems(
      tabItem("tab1",
        box(plotOutput("correlation_plot"),width=8),
        box(selectInput("features","Features:", c("Sepal.Width","Petal.Length","Petal.Width")),width = 4)),
        tabItem("tab2",fluidPage(h1(tab2), dataTableOutput("carstable"))
      )
    )
  ) #here is the , css
  ,tags$head(tags$style(HTML('
        
        .body{font-family: "Arial"}
        
        .H1.title{color: #00551D; font-weight: bold;}
        .H1{color: #00551D; font-weight: bold;}
        
        /* logo */
        .skin-blue .main-header .logo {background-color: #F7F7F7; color: #00551D; font-weight: bold;}
        
        .skin-blue .main-header .logo:hover{background-color: #F7F7F7; color: #00551D; font-weight: bold;}
  
        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {background-color: #F7F7F7;}        

        /* main sidebar */
        .skin-blue .main-sidebar {background-color: #F7F7F7;}

        /* active selected tab in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{background-color: #EDF3EF;}

        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{background-color: #F7F7F7;color: #00551D;}

        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{background-color: #C5EAC1;}
         
        /* toggle button when hovered  */
        .skin-blue .main-header .navbar .sidebar-toggle {background-color: #F7F7F7; color: #00551D}
        .skin-blue .main-header .navbar .sidebar-toggle:hover{background-color: #F7F7F7; color: #00551D}
         
         /* main background colour*/
         .skin-blue .content-wrapper {background-color: #FFFFFF}
                              ')))
)

server <- function(input, output){
  output$correlation_plot <- renderPlot({
    plot(iris$Sepal.Length, iris[[input$features]],
         xlab="Sepal Length",ylab="Feature")
  })
  output$carstable <- renderDataTable(mtcars)
}

shinyApp(ui, server)

我看到的解决方案示例在单独的 file/chunk 中包含 CSS，但我完全不确定如何执行此操作，并且当前方法似乎有效（除了 header 标签).

Answer 1

您可以将代码 in-line 添加到

 h1(span(HTML(tab2), style = 'color:green; font-weight: bold;')),

如果包含在您的标签中，请尝试

.h1, h1{color: #00551D; font-weight: bold;}

Shiny R 中的 H1 格式

H1 formatting in Shiny R

css

r

shiny

shinydashboard