使用bs_theme时，CSS设置shinyWidgets单选按钮样式无效怎么办？

你的自定义CSS规则失效主要有三个核心原因：

• CSS语法错误：你写的样式规则缺少大括号包裹属性，浏览器无法正确解析。比如.btn-default background-color: #7a6bd1;是错误写法，必须用{}把样式属性括起来。
• 类名过时：Bootstrap 5已经移除了.btn-default这个旧类名，shinyWidgets在Bootstrap 5环境下生成的单选按钮，默认使用的是Bootstrap 5原生的按钮类（比如.btn-outline-secondary），旧选择器根本匹配不到目标元素。
• 优先级不足：bslib生成的主题样式带有更高的优先级，即使选择器正确，也可能被主题自带的样式覆盖。

修复后的代码示例 #

library(shiny)
library(bslib)
library(shinyWidgets)

theme = bs_theme(version = 5, bootswatch = "minty")

ui = page_fluid(theme = theme,
                tags$head(
                  tags$style(HTML("
                    /* 针对ID为radio的按钮组，设置未选中按钮的样式 */
                    #radio .btn:not(.active) {
                      background-color: #7a6bd1;
                      border-color: #7a6bd1;
                      color: white; /* 调整文字颜色保证可读性 */
                    }
                    /* 设置选中按钮的样式，用!important强制覆盖主题样式 */
                    #radio .btn.active {
                      background-color: #eb4034 !important;
                      border-color: #eb4034 !important;
                    }
                  "))
                ),
                radioGroupButtons("radio",
                                  label = NULL,
                                  choices = c("Left", "Right"),
                                  selected = "Left")
)

server = function(input, output)
{
}

shinyApp(ui, server)

关键说明 #

1. 修正语法错误：用HTML()包裹多行CSS，并为每个选择器添加{}包裹样式属性。
2. 精准选择元素：通过#radio .btn:not(.active)定位未选中的按钮，#radio .btn.active定位选中的按钮，结合ID选择器提升优先级。
3. 强制覆盖样式：对选中状态的样式添加!important，确保能覆盖bslib主题的默认样式（仅在必要时使用，优先通过更具体的选择器提升优先级）。

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