如何在bslib的value_box中显示响应式值且不破坏格式？

bslib的value_box制作仪表盘时美观实用，但直接放入响应式值（非静态）会破坏格式——比如用textOutput时，值会被<p>标签包裹，导致原有样式失效。示例中下方的value_box值虽能随滑块响应，但格式混乱，请问有没有简洁方法在value_box中放入响应式值且不打乱原有样式？

示例代码：

library(shiny)
library(bslib)

# 定义应用UI ----
ui <- bslib::page(
  
      # 输入：滑块 ----
      sliderInput(inputId = "number",
                  label = "要显示的数字",
                  min = 1,
                  max = 50,
                  value = 30),
      
      # 输出：格式正常的Value Box ----
      bslib::value_box(
        title = "格式正常", 
        value = 30
      ),
    
      # 输出：格式失效的Value Box ----
      bslib::value_box(
        title = "格式失效",
        value = textOutput("out_text")
      )
)

# 定义服务器逻辑 ----
server <- function(input, output) {
  output$out_text <- renderText(input$number)
}

# 运行Shiny应用 ----
shinyApp(ui = ui, server = server)

方法1：用renderUI动态生成完整value_box #

直接在服务器端渲染整个value_box，让响应式值自然融入原有样式：

library(shiny)
library(bslib)

ui <- bslib::page(
  sliderInput(inputId = "number",
              label = "要显示的数字",
              min = 1,
              max = 50,
              value = 30),
  bslib::value_box(
    title = "格式正常", 
    value = 30
  ),
  # 用uiOutput接收动态生成的value_box
  uiOutput("dynamic_value_box")
)

server <- function(input, output) {
  output$dynamic_value_box <- renderUI({
    bslib::value_box(
      title = "格式正常的响应式值",
      value = input$number
    )
  })
}

shinyApp(ui = ui, server = server)

方法2：添加CSS消除<p>标签的默认样式 #

如果不想重构整个value_box，可以通过自定义CSS覆盖textOutput生成的<p>标签样式：

library(shiny)
library(bslib)

ui <- bslib::page(
  # 自定义CSS移除p标签的默认边距、字体样式
  tags$style(HTML("
    .value-box .shiny-text-output p {
      margin: 0;
      font-size: inherit;
      font-weight: inherit;
    }
  ")),
  sliderInput(inputId = "number",
              label = "要显示的数字",
              min = 1,
              max = 50,
              value = 30),
  bslib::value_box(
    title = "格式正常", 
    value = 30
  ),
  bslib::value_box(
    title = "格式修复后的响应式值",
    value = textOutput("out_text")
  )
)

server <- function(input, output) {
  output$out_text <- renderText(input$number)
}

shinyApp(ui = ui, server = server)

方法3：用verbatimTextOutput替代textOutput #

verbatimTextOutput默认不会生成<p>标签，只需调整少量样式匹配value_box：

library(shiny)
library(bslib)

ui <- bslib::page(
  tags$style(HTML("
    .value-box .shiny-verbatim-output {
      background-color: transparent;
      border: none;
      padding: 0;
      font-size: inherit;
      font-weight: inherit;
    }
  ")),
  sliderInput(inputId = "number",
              label = "要显示的数字",
              min = 1,
              max = 50,
              value = 30),
  bslib::value_box(
    title = "格式正常", 
    value = 30
  ),
  bslib::value_box(
    title = "格式正常的响应式值",
    value = verbatimTextOutput("out_text", placeholder = FALSE)
  )
)

server <- function(input, output) {
  output$out_text <- renderText(input$number)
}

shinyApp(ui = ui, server = server)

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