如何在shinydashboard中通过server端借助shinyjs修改标题颜色

问题原因 #

shinydashboard 自带的标题样式优先级高于你自定义的.red类，所以新增的类样式被默认规则覆盖，没有生效。

解决方案 #

有两种可直接运行的实现方式：

• 方式1：提高自定义CSS优先级，给颜色规则加上!important强制覆盖默认样式

library(shinydashboard)
library(shiny)
library(shinyjs)

header <- dashboardHeader(title='want to be red') |> 
  tagAppendAttributes(id='nn',.cssSelector = 'span')

side <- dashboardSidebar(
  useShinyjs(),
  inlineCSS(list('.red' = "color: red !important")),
  p(id = "p", "to red color")
)

body <- dashboardBody()

ui <- dashboardPage(header,side,body,title = 'nhanesR')

server <- function(input, output, session){
  toggleClass(id = 'nn', "red")
  toggleClass(id = 'p', "red")
}
shinyApp(ui,server)

• 方式2：直接通过JS修改元素样式，不需要额外定义CSS类

library(shinydashboard)
library(shiny)
library(shinyjs)

header <- dashboardHeader(title='want to be red') |> 
  tagAppendAttributes(id='nn',.cssSelector = 'span')

side <- dashboardSidebar(
  useShinyjs(),
  p(id = "p", "to red color")
)

body <- dashboardBody()

ui <- dashboardPage(header,side,body,title = 'nhanesR')

server <- function(input, output, session){
  runjs("document.getElementById('nn').style.color = 'red'")
  runjs("document.getElementById('p').style.color = 'red'")
}
shinyApp(ui,server)

内容的提问来源于stack exchange，提问作者zhang jing