Html R中每个页面的CSS

我已经编写了一个R闪亮的应用程序，并在完成它之前对其进行了样式设计。我已经写了少量的HTML，想用CSS改变一些东西，比如背景颜色。 在在线咨询之后，我发现我需要使用class参数来分离css，但是当我为每个页面指定一个类时，它根本不会返回css

下面是我的R Shining应用程序的缩短版本。任何帮助都将不胜感激

library(shiny)

setwd("C:\\Users\\FRSAWG\\Desktop\\Application\\Shiny")

user <- shinyUI(navbarPage("",

tabPanel("Home Page",
       div(class="one",
         div(tags$style("#one body{background-color:blue;color:white;font-family:Arial}"),
            div(HTML("<h1><b><center>Home Page</center></b></h1>"))))),
tabPanel("Glossary",
       div(class="two",
           div(tags$style("#two body{background-color:red;color:white;font-family:Arial}"),
               div(HTML("<h1><b><center>Glossary</center></b></h1>")))))
))

serv <- shinyServer(function(input, output) {})

shinyApp(user, serv)

库（闪亮）
setwd（“C:\\Users\\FRSAWG\\Desktop\\Application\\shinny”）
用户更新：使用Dean Attali（）提供的包
shinyjs
，我编写了一个helper函数，您可以从R调用该函数来创建并运行jQuery函数，根据R语法的输入修改给定对象（通常是选择器）的CSS元素。当选项卡更改时，您可以使用此选项修改
的CSS

这解决了我之前建议的问题-现在不需要切换主体的类，这有时会导致在一瞬间所有
的样式类都被关闭时闪烁

以下是工作示例：

library(shiny)
library(shinyjs)

## Modify the CSS style of a given selector
modifyStyle <- function(selector, ...) {

  values <- as.list(substitute(list(...)))[-1L]
  parameters <- names(values)

  args <- Map(function(p, v) paste0("'", p,"': '", v,"'"), parameters, values)
  jsc <- paste0("$('",selector,"').css({", paste(args, collapse = ", "),"});")

  shinyjs::runjs(code = jsc)

}

# UI for the app
user <- shinyUI(
  navbarPage(title = "", id = "navtab",
             header = div(useShinyjs()),
             tabPanel("Home Page",
                      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
                      "More text."
             ),

             tabPanel("Glossary",
                      div(HTML("<h1><b><center>Glossary</center></b></h1>")),
                      "More text."
             )
  )
)

# Server for the app
serv <- shinyServer(function(input, output, session) {

  observeEvent(input$navtab, {
    currentTab <- input$navtab # Name of the current tab

    if (currentTab == "Home Page") {
      modifyStyle("body", background = "blue", color = "white", 'font-family' = "Arial")
    }
    if (currentTab == "Glossary")  {
      modifyStyle("body", background = "red", color = "white", 'font-family' = "Arial")
    }
  })

})

shinyApp(user, serv)

正如我提到的，我是CSS新手，所以我不能100%确定这是否是您想要的输出

EDIT2:这里有一个解决方案，当所选选项卡更改时，使用包
shinyjs
更新
的类。（请注意，为了使用
shinyjs
中的函数，您需要在ui中包含
useShinyjs（）
）

其思想是通过将其id设置为
navtab
，使
navbarPage
返回当前在
input$navtab
中处于活动状态的选项卡的名称。然后，我们可以使用包
shinyjs
中的
toggleClass
函数动态更改
的类，从而应用适当的CSS样式

这并不完美，因为类的更改只有在服务器收到标签已更改的通知后才会发生，这有时会导致后台在更改前闪烁。这可能会有点烦人。我怀疑更好的解决方案是在单击链接更改选项卡时使用javascript更改
类，但我不知道如何使用Shiny来实现这一点

代码如下：

library(shiny)
library(shinyjs)

user <- shinyUI(
  navbarPage(title = "", id = "navtab",
  header = tags$head(
    useShinyjs(),
    tags$style(HTML(".one {background: blue; color: white; font-family: Arial}")),
    tags$style(HTML(".two {background: red;  color: white; font-family: Arial}"))
  ),

    tabPanel("Home Page",
      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
      "More text."
    ),

    tabPanel("Glossary",
     div(HTML("<h1><b><center>Glossary</center></b></h1>")),
     "More text."
    )
  )
)

serv <- shinyServer(function(input, output, session) {

   observeEvent(input$navtab, {
     shinyjs::toggleClass(selector = "body", class = "one",
                 condition = (input$navtab == "Home Page"))

     shinyjs::toggleClass(selector = "body", class = "two",
                 condition = (input$navtab == "Glossary"))
   })

})

shinyApp(user, serv)

库（闪亮）
图书馆（shinyjs）
用户这解决了我指定哪个“页面”接收哪个颜色的问题，但是运行此脚本意味着仅文本背景变为蓝色或红色，我希望整个背景在一个页面上变为蓝色，在另一个页面上变为红色（因此主体参数）。我想你可能已经，这就是我在编辑的第二个代码段中试图解决的问题。似乎我在某个地方犯了一个复制粘贴错误-我肯定它昨天起作用了，但现在似乎不起作用（就像，改变标签会改变除了导航栏以外的所有东西的颜色）。@Andrew我使用
shinyjs
包中包含的javascript功能添加了一个更新的解决方案。它不是完美的，但它会改变整个背景。只是一个关于使用shinyjs的注释：您使用
runjs
的解决方案非常好和聪明，但我想指出，在未来，创建一个实际的javascript函数并直接调用它可能会更容易——查看
shinyjs:：extendShinyjs
。感谢您在MikkoM向人们介绍这一点！很好的观点——这可能是一个更优雅的解决方案。在提出这个问题之前，我实际上研究过如何使用
extendedshinyjs
，但我必须承认，我对R和JS之间的参数传递有点害怕——我才刚刚开始学习jQuery，所以我还不太习惯用JS编码。PS.
shinyjs
package@daattali做得很好！我发现它真的很有帮助，也很鼓舞人心——使用它实际上是让我想自己学习JavaScript的原因。看看我更新的答案——摆脱了我之前建议中有时出现的闪烁。
library(shiny)
library(shinyjs)

user <- shinyUI(
  navbarPage(title = "", id = "navtab",
  header = tags$head(
    useShinyjs(),
    tags$style(HTML(".one {background: blue; color: white; font-family: Arial}")),
    tags$style(HTML(".two {background: red;  color: white; font-family: Arial}"))
  ),

    tabPanel("Home Page",
      div(HTML("<h1><b><center>Home Page</center></b></h1>")),
      "More text."
    ),

    tabPanel("Glossary",
     div(HTML("<h1><b><center>Glossary</center></b></h1>")),
     "More text."
    )
  )
)

serv <- shinyServer(function(input, output, session) {

   observeEvent(input$navtab, {
     shinyjs::toggleClass(selector = "body", class = "one",
                 condition = (input$navtab == "Home Page"))

     shinyjs::toggleClass(selector = "body", class = "two",
                 condition = (input$navtab == "Glossary"))
   })

})

shinyApp(user, serv)