如何在未使用Bootswatch主题的Shiny应用中使用bslib卡片？

核心原因 #

bslib的卡片组件依赖自身内部的基础CSS结构和变量，并非仅依赖Bootswatch主题的定制样式。直接复制Bootswatch的卡片CSS会缺少核心基础样式，导致组件无法正常渲染。

解决方案步骤 #

• 初始化bslib基础环境：即使不使用Bootswatch主题，也要用bslib::page()或bslib::bootstrap()构建UI框架，确保bslib的核心CSS变量和基础样式被加载。可以通过bs_theme(bootswatch = NULL)明确禁用Bootswatch主题。

• 添加卡片核心基础样式：在自定义CSS中补充bslib卡片的基础结构样式（而非仅Bootswatch的定制样式），以下是核心必要样式：

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.375rem;
  }
  .card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
  }
  .card-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
  }
  

  你可以基于这些基础样式，结合自定义需求修改颜色、边框、间距等属性。

• 处理样式优先级冲突：如果自定义CSS的全局样式（如border、padding）覆盖了卡片样式，需要给卡片相关样式添加更具体的选择器（例如.custom-container .card），必要时可使用!important（建议优先通过选择器优先级解决，谨慎使用!important）。

完整示例代码 #

library(shiny)
library(bslib)

ui <- page(
  theme = bs_theme(bootswatch = NULL), # 禁用Bootswatch主题
  tags$style(HTML("
    /* 自定义全局样式 */
    body {
      background-color: #f5f7fa;
      font-family: 'Segoe UI', sans-serif;
    }
    
    /* 自定义卡片样式（基于bslib核心结构） */
    .card {
      border: 1px solid #e2e8f0;
      border-radius: 0.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      background-color: #ffffff;
    }
    .card-body {
      padding: 1.5rem;
    }
    .card-title {
      color: #2d3748;
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    .card-text {
      color: #4a5568;
      line-height: 1.7;
    }
  ")),
  # 使用bslib卡片组件
  card(
    card_title("自定义CSS下的卡片"),
    card_body(
      p("该卡片基于bslib核心组件构建，未使用Bootswatch主题，完全适配自定义CSS。")
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

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