如何仅用CSS修改shinymanager登录页的.panel-auth类样式

问题原因 #

shinymanager的登录验证页面是独立于后续仪表盘UI渲染的，你存放在www目录下的CSS资源默认只会在登录成功、仪表盘加载时才会被引入，因此登录页无法识别对应的自定义样式。

解决方案 #

你只需要将CSS资源的引用注入到secure_app的登录页渲染逻辑中即可，有两种常用实现方式：

方式1：引入外部CSS文件（推荐） #

修改你的secure_app代码，在tags_top参数内新增tags$head标签引入你的folder.css文件，注意shiny的www目录会被映射为静态资源根路径，引用时不需要加www/前缀：

ui <- secure_app(
  ui = ui,
  tags_top = 
    tags$div(
      # 新增：引入自定义CSS，确保登录页优先加载
      tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "folder.css")),
      tags$h4("Demo", style = "align:center"),
      tags$img(
        src = "https://www.r-project.org/logo/Rlogo.png", width = 100
      )
    ),
  tags_bottom = tags$div(
    tags$p(
      "For any question, please  contact ",
      tags$a(
        href = "mailto:someone@example.com?Subject=Shiny%20aManager",
        target="_top", "administrator"
      )
    )
  )
)

同时为了避免默认样式优先级更高覆盖你的自定义配置，建议修改folder.css中的代码，给需要覆盖的属性加!important标记：

.panel-auth {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #008cba !important;
opacity: 1;
z-index: 99997;
overflow-x: hidden;
overflow-y: hidden !important;
}

方式2：直接内嵌CSS样式 #

如果不想维护单独的CSS文件，也可以直接把样式内嵌到代码中：

ui <- secure_app(
  ui = ui,
  tags_top = 
    tags$div(
      # 新增：内嵌自定义样式
      tags$style(HTML("
        .panel-auth {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: #008cba !important;
          opacity: 1;
          z-index: 99997;
          overflow-x: hidden;
          overflow-y: hidden !important;
        }
      ")),
      tags$h4("Demo", style = "align:center"),
      tags$img(
        src = "https://www.r-project.org/logo/Rlogo.png", width = 100
      )
    ),
  tags_bottom = tags$div(
    tags$p(
      "For any question, please  contact ",
      tags$a(
        href = "mailto:someone@example.com?Subject=Shiny%20aManager",
        target="_top", "administrator"
      )
    )
  )
)

验证方式 #

启动应用后打开登录页，按F12调出开发者工具，查看.panel-auth元素的样式属性，确认自定义配置已生效即可。

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