Программно изменить CSS в скрипте Shiny

Question

Я хочу изменить цвет текста в приложении Shiny на основе ввода пользователя. Вот простой пример. Это в основном правильный подход? Если я жестко закодирую CSS, это работает. Например, если я изменю:

div(style = css_stub,

до

div(style = "inline-block;  red;",

цвет текста меняется. Пожалуйста, объясните, как программно изменять CSS в приложении Shiny.

library(shiny)

css_stub <- paste0("'", "inline-block;  color:black;", "'")

ui <- fluidPage(

  titlePanel("Color Test"),
  sidebarLayout(
    sidebarPanel(

      selectInput(inputId = "colors",
                  label = "Choose a color:",
                  choices = c("red", "blue"))
    ),

    mainPanel(
      div(style = css_stub, 
          textOutput("text_out"))

    )
  )
)

server <- function(input, output) {
  observeEvent(input$colors, {
    if (input$colors == "red") {
      css_stub <- paste0("'", "inline-block;  color:red;", "'")
      output$text_out <- renderText({"hello - red"})
    } else {
      css_stub <- paste0("'", "inline-block;  color:blue;", "'")
      output$text_out <- renderText({"hello - blue"})
    }
  })

}


shinyApp(ui = ui, server = server)

Answer 1

Я бы определил классы и стили для каждого, затем добавил бы и удалил классы, используя библиотеку smoothjs .

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(), 
  tags$head(
    tags$style(HTML("
      div.red { color: red; }
      div.blue { color: blue; }
    "))
  ),

  titlePanel("Color Test"),
  sidebarLayout(
    sidebarPanel(
      selectInput(inputId = "colors",
                  label = "Choose a color:",
                  choices = c("red", "blue"))
    ),

    mainPanel(
      div(id="color_change", style = "inline-block; ", 
          textOutput("text_out"))

    )
  )
)

server <- function(input, output) {
  observeEvent(input$colors, {
    color_to_set <- input$colors
    color_to_unset <- setdiff(c("red", "blue"), color_to_set)
    shinyjs::addClass("color_change", color_to_set)
    for (col in color_to_unset) shinyjs::removeClass("color_change", col)
  })

  output$text_out = renderText(paste("Hello -", input$colors))
}

shinyApp(ui = ui, server = server)