Shiny应用加载时CSS样式表内容显示问题求助

嘿，这个小故障我之前也碰到过！大概率是你使用includeCSS的方式不对，导致浏览器误把CSS代码当成普通文本先渲染出来了，给你几个靠谱的解决办法：

方法1：正确使用外部CSS文件引入 #

首先把你的CSS代码完整保存到Shiny项目的www目录下，比如命名为custom-styles.css（文件名随便取，后缀必须是.css）。

然后在UI部分这样引入：

ui <- fluidPage(
  # 注意：Shiny会自动从www目录查找资源，所以路径不用加www/
  includeCSS("custom-styles.css"),
  
  # 你的其他UI组件
  h1("这是测试标题"),
  p("这是测试段落内容")
)

方法2：使用内联样式（无需单独CSS文件） #

如果不想单独创建CSS文件，直接把样式写在UI里的话，别用includeCSS，改用tags$style()配合HTML()包裹你的CSS代码：

ui <- fluidPage(
  tags$style(HTML("
    h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 23.4px; color: #8b0000; background-color: #FFCCCB; }
    h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px;}
    p { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; }
    blockquote { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; }
    pre { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; }
    body{ padding-top: 70px; }
  ")),
  
  # 你的其他UI组件
  h1("这是测试标题"),
  p("这是测试段落内容")
)

额外排查点 #

• 确认你的Shiny是最新版本，旧版本偶尔会有这类小bug，更新命令：install.packages("shiny")
• 检查www目录的拼写是否正确（必须是小写的www，Shiny对这个目录名是大小写敏感的）

试试上面的方法应该就能解决啦，节日快乐！

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