如何通过CSS样式表修改shinyalert的OK确认按钮颜色

解决方案 #

你不能直接将按钮样式属性写在.alert的样式声明块中，因为确认按钮是.alert容器的子元素，需要单独选中目标元素修改样式。

shinyalert的确认按钮默认自带confirm类，你可以通过后代选择器精准匹配你自定义类弹窗下的确认按钮，修改后的代码如下：

ui <- fluidPage(
  tags$style('
    /* 普通状态下的确认按钮样式 */
    .alert .confirm {
      background-color: #2874A6;
      border-color: #2874A6; /* 同步修改边框颜色避免默认边框违和 */
      color: #fff; /* 可以按需调整按钮文字颜色 */
    }
    /* 鼠标悬浮时的确认按钮样式，可按需调整 */
    .alert .confirm:hover {
      background-color: #1F618D;
      border-color: #1F618D;
    }
  '),
  actionButton('showalert', 'Show Alert'),
  shinyalert::useShinyalert()
)
server <- function(input, output, session) {
  observeEvent(input$showalert, {
     shinyalert::shinyalert(title = 'Alert', className = 'alert')
    })
}
shinyApp(ui = ui, server = server)

如果需要同时修改取消按钮的样式，把选择器换成.alert .cancel即可。

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