如何为Shiny应用中所有radioGroupButtons全局设置CSS样式

步骤1：创建CSS文件 #

在你的Shiny项目根目录下新建www文件夹（如果没有的话），然后在里面创建style.css文件，写入以下样式规则：

/* 全局设置所有radioGroupButtons选项的默认样式 */
.radio-group-buttons .btn {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #495057;
}

/* 设置选中状态的按钮样式 */
.radio-group-buttons .btn.active {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
}

/* 可选：针对特定选项值设置专属背景色 */
.radio-group-buttons .btn[data-value="选项1"] {
  background-color: #ffc107;
  color: #212529;
}

.radio-group-buttons .btn[data-value="选项X"] {
  background-color: #28a745;
  color: white;
}

步骤2：在Shiny应用中引用CSS #

在UI部分通过includeCSS()引入刚才的CSS文件，示例代码如下：

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # 引入全局样式文件
  includeCSS("www/style.css"),
  
  # 任意多个radioGroupButtons组件都会自动应用样式
  radioGroupButtons(inputId = "a", label = "选项组A", choices = c("选项1", "选项2", "选项3")),
  br(),
  radioGroupButtons(inputId = "b", label = "选项组B", choices = c("选项X", "选项Y", "选项Z"))
)

server <- function(input, output, session) {
  # 无需额外JS脚本，样式由CSS全局控制
}

shinyApp(ui, server)

关键说明 #

• .radio-group-buttons是shinyWidgets包中radioGroupButtons组件的统一容器类，通过它可以选中所有该类型组件的选项
• .btn是每个选项按钮的基础类，.active是按钮被选中时自动添加的类，用来区分选中状态
• 如果需要给特定选项值设置样式，使用[data-value="xxx"]属性选择器，不管组件的inputId是什么，只要选项值匹配就会生效
• 必须把CSS文件放在www文件夹下，Shiny会自动识别这个目录作为静态资源目录

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