Question

首先，Shiny相当新，所以请耐心等待。我试图用授权创建R studio闪亮页面。第一页是登录页面，如果您通过授权程序（例如用户和通行证是正确的），您将被带到主要的Shiny页面。实际上，它只意味着呈现了两个不同的UI。

然而，自实现授权页面以来，改变侧边栏和标题颜色的CSS代码似乎延迟运行（通过运行应用程序可以看出，您可以注意到Shiny默认样式被加载到侧边栏上，之后被覆盖通过CSS）。这可能是什么问题？

代码如下：

ui.R

shinyUI(
fluidPage(

ui <- dashboardPage(

header <- dashboardHeader(uiOutput("header")),
sidebar <- dashboardSidebar(uiOutput("sidebarpanel")),
body <- dashboardBody(uiOutput("body"))
)))

server.R

library(shinydashboard)
library(writexl)
library(shinyjs)
library(shinythemes)
library(openssl)
library(shinyWidgets)

shinyServer(function(input, output, session) {

Logged <- FALSE
USER <<- reactiveValues(Logged = Logged)

my_username <- "demo"
my_password <- "369"

observe({ 
 if (USER$Logged == FALSE) {
  if (!is.null(input$Login)) {
    if (input$Login > 0) {
      Username <- isolate(input$userName)
      Password <- isolate(input$passwd)
      Id.username <- which(my_username == Username)
      Id.password <- which(my_password == Password)
      if (length(Id.username) > 0 & length(Id.password) > 0) {
        if (Id.username == Id.password) {
          USER$Logged <<- TRUE
        }}
       else sendSweetAlert(session = session, title = "Incorrect Username or 
       Password!",
                        text = "Please check.", type = "error",
                         btn_labels = "Ok")

         }}}    
     })

    output$body <- renderUI({ 
    dashboardBody(
          tags$style(HTML('
                  /* logo */
                  .skin-blue .main-header .logo {
                  background-color: #FFFFFF;
                  }

                  /* logo when hovered */
                  .skin-blue .main-header .logo:hover {
                  background-color: #FFFFFF;
                  }

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

                  /* logo when hovered */
                  .skin-blue .main-header .navbar {
                  background-color: #873260;
                  }
                  ')),

   if (USER$Logged == FALSE) {
        box(title = "Login",textInput("userName", "Username"),
        passwordInput("passwd", "Password"),
        br(),
        actionButton("Login", "Log in")
    )})
})

    output$sidebarpanel <- renderUI({
      if (USER$Logged == TRUE) { 
        dashboardSidebar( 

                    sidebarMenu(
                      menuItem("Home", icon = icon("home")),
                      menuItem("Panel 1", icon = icon("th-large")),
                      menuItem("Panel 2", icon = icon("dashboard")),
                      menuItem("Panel 3", icon = icon("dashboard")),
                      menuItem("Panel 4", icon = icon("pencil")),
                      menuItem("Panel 5", icon = icon("pencil")),
                      menuItem("Panel 6", icon = icon("th"))
                    )
                  )
  }})
})

Answer 1

将样式放入ui.R似乎可以解决问题

shinyUI(
fluidPage(

ui <- dashboardPage(

  header <- dashboardHeader(uiOutput("header")),
  sidebar <- dashboardSidebar(uiOutput("sidebarpanel")),
  body <- dashboardBody(      tags$style(HTML('
                                              /* logo */
                                              .skin-blue .main-header .logo {
                                              background-color: #FFFFFF;
                                              }

                                              /* logo when hovered */
                                              .skin-blue .main-header 
                                              .logo:hover {
                                              background-color: #FFFFFF;
                                              }

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

                                              /* logo when hovered */
                                              .skin-blue .main-header .navbar {
                                              background-color: #873260;
                                              }
                                              ')),

    uiOutput("body"))
)))

但是，如果有人能够解释是什么导致了这种延迟，那就太好了。

将CSS加载到闪亮服务器时延迟

1 个答案: