根据闪亮的输入更改 CSS 属性

Question

在我的应用中，CSS 属性位于一个单独的文件中，并通过 includeCSS('./www/styles.css') 包含在 UI 中。

是否可以根据输入的值动态更改 font-family 属性？

例如用户界面包含：

selectInput(inputId = 'selected_language', label = 'Choose language', choices = c('lao', 'english'), selected = 'english')

如果选择“lao”，则使用body { font-family: Phetsarath OT; }，如果选择“english”，则使用body { font-family: Arial, Helvetica, sans-serif; }。

Answer 1

您可以将 css 部分包含在 tags$style 中，并将其放在服务器端的 renderUI() 中。

最简单的方法是将其余的 css 也放在服务器端，但您也可以从 styles.css 文件中读取，见下文。

可重现的例子：

library(shiny)

# Simulating a styles.css file
css_content <- "
h4 {
  font-family: 'Lobster', cursive;
  font-weight: 500;
  line-height: 1.1;
  color: #48ca3b;
}
"

writeLines(text = css_content, con = "styles.css")

css <- readLines(con = "styles.css") %>% 
  paste(collapse = "\n")


ui <- fluidPage(
  selectInput(inputId = 'selected_language', label = 'lang', choices = c('lao', 'english'), selected = 'english'),
  uiOutput("css_style"),
  h3("one"),
  h4("two"),
  h5("three")
)

server <- function(input, output, session) {
  
  style <- reactive({
    ifelse(
      test = input$selected_language == "lao",
      yes = "body { font-family: Phetsarath OT; }",
      no = "body { font-family: Arial, Helvetica, sans-serif; }"
    )
  })
  
  output$css_style <- renderUI({
    tags$head(
      tags$style(
        HTML(
          paste0(c(style(), css), collapse = "\n")
        )
      )
    )
  })
}

shinyApp(ui, server)