如何在使用shinytheme的R Shiny App中覆盖按钮背景色？

使用shinytheme（如示例中的cerulean主题）时，自定义按钮背景色仅在按压时显示，无法永久生效，尝试多种CSS样式均未解决。以下是尝试的示例代码：

library(shiny)
library(shinythemes)
shinyApp(
  ui = 
    navbarPage(id = "intabset", 
               title = "HOME",
               windowTitle = "Data cleaning", 
               theme = shinytheme("cerulean"), 
               collapsible = TRUE, 
               header=tags$style(
                 "#actButt{
     background-color:red !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }
    #dwdButt{
     background-color:green !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }"),
               tabPanel(
                 title = " Home", icon = icon("home"),
                 mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
                           fluidRow(h3("Home page data cleaning")),
                           downloadButton('dwdButt',
                                          'Download data'),
                           actionButton('actButt',
                                          'Generate data'),
                             actionButton('actButt2',
                                        'Generate data 2',
                                        style = "background-color: red !important; color: black")
                           )
                 )# end tabpanel
    ), # end navbarpage
  server = function(input, output) {
  }
)

解决方案 #

问题根源在于shinytheme的主题样式会为按钮的默认、hover、focus、active等不同状态单独设置背景色，仅覆盖默认状态的样式无法让颜色永久生效。需要同时覆盖这些状态的CSS样式：

修改tags$style中的内容为：

#actButt, #actButt:hover, #actButt:focus, #actButt:active {
  background-color: red !important;
  color: black !important;
  border: 0px !important;
  box-shadow: none !important;
}

#dwdButt, #dwdButt:hover, #dwdButt:focus, #dwdButt:active {
  background-color: green !important;
  color: black !important;
  border: 0px !important;
  box-shadow: none !important;
}

修改后的完整代码 #

library(shiny)
library(shinythemes)
shinyApp(
  ui = 
    navbarPage(id = "intabset", 
               title = "HOME",
               windowTitle = "Data cleaning", 
               theme = shinytheme("cerulean"), 
               collapsible = TRUE, 
               header=tags$style(
                 "#actButt, #actButt:hover, #actButt:focus, #actButt:active {
                     background-color: red !important;
                     color: black !important;
                     border: 0px !important;
                     box-shadow: none !important;
                 }
                 #dwdButt, #dwdButt:hover, #dwdButt:focus, #dwdButt:active {
                     background-color: green !important;
                     color: black !important;
                     border: 0px !important;
                     box-shadow: none !important;
                 }"),
               tabPanel(
                 title = " Home", icon = icon("home"),
                 mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
                           fluidRow(h3("Home page data cleaning")),
                           downloadButton('dwdButt', 'Download data'),
                           actionButton('actButt', 'Generate data'),
                           actionButton('actButt2', 'Generate data 2',
                                        style = "background-color: red !important; color: black !important; border: 0px !important; box-shadow: none !important")
                           )
                 )# end tabpanel
    ), # end navbarpage
  server = function(input, output) {
  }
)

说明 #

• 显式指定按钮的所有状态（默认、hover、focus、active）并添加!important，确保自定义样式优先级高于shinytheme的主题样式；
• 对于actButt2这种内联样式的按钮，同样需要覆盖所有状态的样式，仅设置默认状态会导致hover或点击时颜色变回主题样式。

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