使用renderUI()渲染sidebarLayout导致bslib页面样式丢失问题

希望通过renderUI()在server端实现完整的sidebarLayout，但运行后页面样式丢失（sidebar与mainPanel布局混乱，卡片无正常填充样式）；将sidebarLayout直接放在ui端时，样式显示正常。询问是否存在替代renderUI()的函数，能保留卡片样式。

问题代码（样式丢失） #

library(shiny)
library(bslib)

ui <- fluidPage(
  uiOutput("sidebarpanel")
)

server <- function(input, output, session) {
  output$sidebarpanel <- renderUI({
    sidebarLayout(
      sidebarPanel(width = 3, 
        selectizeInput("country", "Country:", choices = c("a", "b"))
      ),
      mainPanel(width = 9,
        page_fillable(
          layout_columns(height = 200,
            card(card_header("card1")),
            card(card_header("card2"))
          )
        )
      )
    )
  })
}

shinyApp(ui = ui, server = server)

正常样式代码（ui端实现） #

library(shiny)
library(bslib)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(width = 3, 
      selectizeInput("country", "Country:", choices = c("a", "b"))
    ),
    mainPanel(width = 9,
      page_fillable(
        layout_columns(height = 200,
          card(card_header("card1")),
          card(card_header("card2"))
        )
      )
    )
  )
)

server <- function(input, output, session) { }

shinyApp(ui = ui, server = server)

不存在专门替代renderUI()的函数，问题根源是page_fillable()需要在UI初始化阶段被shiny/bslib识别，才能正确加载对应的CSS样式。当用renderUI()动态渲染整个结构时，page_fillable()的样式未被注入，导致布局错乱。

推荐两种解决方式：

方式一：将page_fillable()移至UI端，仅动态渲染内部内容 #

把page_fillable()放在ui的固定结构中，server端只渲染sidebarLayout部分，确保样式提前加载：

library(shiny)
library(bslib)

ui <- fluidPage(
  page_fillable(
    uiOutput("sidebarpanel")
  )
)

server <- function(input, output, session) {
  output$sidebarpanel <- renderUI({
    sidebarLayout(
      sidebarPanel(width = 3, 
                   selectizeInput("country", "Country:", choices = c("a", "b"))
      ),
      mainPanel(width = 9,
                layout_columns(height = 200,
                               card(card_header("card1")),
                               card(card_header("card2"))
                )
      )
    )
  })
}

shinyApp(ui = ui, server = server)

方式二：手动确保样式初始化（备选） #

如果必须在server端渲染全部内容，可以通过tagList包裹并显式关联主题样式，不过这种方式不如方式一简洁：

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(),
  uiOutput("sidebarpanel")
)

server <- function(input, output, session) {
  output$sidebarpanel <- renderUI({
    tagList(
      page_fillable(
        sidebarLayout(
          sidebarPanel(width = 3, 
                       selectizeInput("country", "Country:", choices = c("a", "b"))
          ),
          mainPanel(width = 9,
                    layout_columns(height = 200,
                                   card(card_header("card1")),
                                   card(card_header("card2"))
                    )
          )
        )
      )
    )
  })
}

shinyApp(ui = ui, server = server)

内容的提问来源于stack exchange，提问作者cory