调用updateRadioGroupButtons更新选项时原有自定义样式丢失问题

给radioGroupButtons配置和选项值绑定的差异化自定义背景色时，遇到的异常表现非常明确：

• 只调用updateRadioGroupButtons更新选中值，自定义背景色完全正常
• 只要同步传入choiceValues、choiceNames参数刷新选项列表，之前配置的自定义背景色就会全部消失

出现这个问题的逻辑很直接：updateRadioGroupButtons只要触发了选项列表更新，就会销毁组件原来的DOM节点，重新生成一整套按钮元素。你之前把样式绑定逻辑写在页面初始化的一次性JS脚本里，这些脚本只会在页面第一次加载时执行一次，把样式绑在旧节点上；等组件重新渲染出全新的节点后，没有任何逻辑给这些新节点补样式，自定义配色自然就失效了。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
    radioGroupButtons(
        inputId = "sent", 
        label = "Sentiment", 
        choiceValues = -2:1, 
        checkIcon = list(yes = icon("check")),
        choiceNames = paste0(-2:1),
        justified = TRUE, width = "300px"
    ),
    # 仅初始化阶段给旧节点绑定一次性样式
    tags$script("$('input:radio[name=sent][value=-2]').parent().css('background-color', '#DE6B63');"),
    tags$script("$('input:radio[name=sent][value=-1]').parent().css('background-color', '#EDB6B2');"),
    tags$script("$('input:radio[name=sent][value=0]').parent().css('background-color', '#E7E7E7');"),
    tags$script("$('input:radio[name=sent][value=1]').parent().css('background-color', '#B2EDB5');"),
    tags$script("$('input:radio[name=sent][value=2]').parent().css('background-color', '#7EF373');"),
    verbatimTextOutput(outputId = "res"),
    actionButton(inputId = "update", label = "Update")
)

server <- function(input, output, session) {
    
    output$res <- renderPrint(input$sent)
    
    observeEvent(input$update, {
        # 更新选项列表会触发整个组件的DOM重渲染
        updateRadioGroupButtons(session = session, inputId = "sent", choiceValues = -2:2, choiceNames = paste0(-2:2))
    }, ignoreInit = TRUE)
}

shinyApp(ui, server)

最省心的实现方式是把原来用JS给节点加内联样式的逻辑，换成全局CSS选择器匹配规则。CSS选择器会自动匹配DOM里新生成的同结构节点，完全不用关心组件什么时候重渲染，样式绑定不会轻易失效。

把UI里原来那堆只在初始化执行的JS脚本，替换成注入的全局样式代码：

# 替换原逻辑中的tags$script部分
tags$style(HTML("
  /* 适配按钮组件默认样式结构 */
  .btn-group-toggle input:radio[name='sent'] + .btn {
    border: none;
  }
  /* 按单选值匹配对应背景色 */
  input:radio[name='sent'][value='-2'] + .btn {
    background-color: #DE6B63;
  }
  input:radio[name='sent'][value='-1'] + .btn {
    background-color: #EDB6B2;
  }
  input:radio[name='sent'][value='0'] + .btn {
    background-color: #E7E7E7;
  }
  input:radio[name='sent'][value='1'] + .btn {
    background-color: #B2EDB5;
  }
  input:radio[name='sent'][value='2'] + .btn {
    background-color: #7EF373;
  }
"))

这种实现的优势：

• 不管后续怎么调用updateRadioGroupButtons更新选中值、替换选项列表，样式都会自动生效，不用重复写绑定逻辑
• 不存在JS执行的时序差，不会出现新节点渲染完、样式延迟补上的闪屏现象
• 代码更简洁，没有冗余的重复脚本

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