我正在构建一个简单的 Shiny 应用程序,并且对 CSS 以及如何使用它来设计不同的 UI 元素(背景颜色、大小等)有很好的理解(或者我是这么认为的)。
我遇到的问题是我在我的应用程序中经常使用
renderUI()
,因为我需要输入能够相互响应。当我将 selectInput()
从应用程序的 ui
部分移动到 server
部分(并在 renderUI()
内使用它)时,它现在似乎忽略了 CSS。给什么?
这是第一个示例,不使用
renderUI()
,CSS(在本例中,selectInput()
文本只需使用较小的 6px 字体大小)即可正常工作:
library(shiny)
ui <- fluidPage(
tags$head(tags$style(HTML('.selectize-input {font-size: 6px;}'))),
shiny::selectInput("input_1", label = NULL, choices = c("a", "b", "c"))
)
)
server <- function(input, output, session){}
shinyApp(ui = ui, server = server)
然后我将
selectInput()
调用移到 renderUI()
部分中的 server
函数中,并且 CSS 不会被应用,即使我根本没有更改该部分。 CSS 规则不应该仍然应用于所有 .selectize-input
元素吗?
library(shiny)
ui <- fluidPage(
tags$head(tags$style(HTML('.selectize-input {font-size: 6px;}'))),
shiny::uiOutput(outputId = "output_1")
)
)
server <- function(input, output, session){
output$output_1 = shiny::renderUI({
shiny::selectInput("input_1", label = NULL, choices = c("a", "b", "c"))
})
}
shinyApp(ui = ui, server = server)
当我在 RStudio 中运行您的代码时,我发现您的 css 值被覆盖。
为什么它发生在一个而不是另一个我不确定。
也许可以使用样式表并向下拉列表中添加一个附加类来确保它选择,而不是使用内联 CSS?或者添加更多类,例如 .selectize-dropdown 等以提高其优先级。
编辑:试试这个
library(shiny)
ui <- fluidPage(
tags$head(tags$style(HTML('.selectize-input, .target {font-size: 6px;}'))),
shiny::uiOutput(outputId = "output_1", class = "target")
)
server <- function(input, output, session){
output$output_1 = shiny::renderUI({
shiny::selectInput("input_1", label = NULL, choices = c("a", "b", "c"))
})
}
shinyApp(ui = ui, server = server)