R Shiny中CSS样式的>显示为>的原因排查

问题成因 #

• Shiny的tags$style函数默认会对传入的文本执行HTML转义，这是框架内置的安全防护机制，用于避免潜在的HTML注入风险。
• CSS子选择器符号>属于HTML特殊字符，会被自动转换为对应的HTML实体>；浏览器开发者工具中显示的>，是该实体符号被二次转义后的显示结果，最终导致浏览器无法识别正确的CSS选择器，样式无法生效。

解决方法 #

只需用HTML()函数包裹CSS代码，明确告诉Shiny不对这段内容进行转义处理：

修正后的代码示例 #

library(shiny)
library(shinyWidgets) # 注意：numericInputIcon来自shinyWidgets包，需提前加载

ui <- fluidPage(
    tags$style(HTML("#input-label + div > div {width: 150px;}")),
    numericInputIcon("input", "input", 42, icon = "Num")
)

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

shinyApp(ui, server)

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