R Shiny App：在使用shinytheme时覆盖按钮背景颜色

huangapple
go评论101阅读模式
英文:

R Shiny App : override button background color while using a shinytheme

问题

在R Shiny App中使用shinythemes覆盖按钮的背景颜色，我尝试了很多小时的CSS，但没有成功，非常感谢任何人能够帮助。

以下是我尝试的示例代码，它只在按钮被按下时更改颜色，但我想要颜色保持"永久"：

  1. library(shiny)
  2. library(shinythemes)
  3. shinyApp(
  4.   ui = 
  5.     navbarPage(id = "intabset", 
  6.                title = "HOME",
  7.                windowTitle = "Data cleaning", 
  8.                theme = shinytheme("cerulean"), 
  9.                collapsible = TRUE, 
  10.                header=tags$style(
  11.                  "#actButt{
  12.      background-color:red !important;
  13.       color: black;
  14.       -webkit-box-shadow: 0px;
  15.       box-shadow: 0px;
  16.            border:0px;
  17.                  }
  18.     #dwdButt{
  19.      background-color:green !important;
  20.       color: black;
  21.       -webkit-box-shadow: 0px;
  22.       box-shadow: 0px;
  23.            border:0px;
  24.                  }"),
  25.                tabPanel(
  26.                  title = " Home", icon = icon("home"),
  27.                  mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
  28.                            fluidRow(h3("Home page data cleaning")),
  29.                            downloadButton('dwdButt', 'Download data'),
  30.                            actionButton('actButt', 'Generate data'),
  31.                              actionButton('actButt2', 'Generate data 2',
  32.                                         style = "background-color: red !important; color: black")
  33.                            )
  34.                  )# end tabpanel
  35.     ), # end navbarpage
  36.   server = function(input, output) {
  37.   }
  38. )

注意：我看过这个答案，但没有帮助。

英文:

Does anyone know how I can override background color of buttons in a R Shiny App while using shinythemes ?

I have tried tons of css since hours without success... I am getting crazy... I would be very grateful if anyone could help.

Here below an example of what I tried : it colors only the button when it is pressed, but I would like to have the colour ''permanently''

  1. library(shiny)
  2. library(shinythemes)
  3. shinyApp(
  4.   ui = 
  5.     navbarPage(id = "intabset", 
  6.                title = "HOME",
  7.                windowTitle = "Data cleaning", 
  8.                theme = shinytheme("cerulean"), 
  9.                collapsible = TRUE, 
  10.                header=tags$style(
  11.                  "#actButt{
  12.      background-color:red !important;
  13.       color: black;
  14.       -webkit-box-shadow: 0px;
  15.       box-shadow: 0px;
  16.            border:0px;
  17.                  }
  18.     #dwdButt{
  19.      background-color:green !important;
  20.       color: black;
  21.       -webkit-box-shadow: 0px;
  22.       box-shadow: 0px;
  23.            border:0px;
  24.                  }"),
  25.                tabPanel(
  26.                  title = " Home", icon = icon("home"),
  27.                  mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
  28.                            fluidRow(h3("Home page data cleaning")),
  29.                            downloadButton('dwdButt',
  30.                                           'Download data'),
  31.                            actionButton('actButt',
  32.                                           'Generate data'),
  33.                              actionButton('actButt2',
  34.                                         'Generate data 2',
  35.                                         style = "background-color: red !important; color: black")
  36.                            )
  37.                  )# end tabpanel
  38.     ), # end navbarpage
  39.   server = function(input, output) {
  40.   }
  41. )

NB : I have seen this answer, but it does not help.

答案1

得分: 2

For one button id:

  1. library(shiny)
  2. library(shinythemes)
  4. shinyApp(
  5.   ui = 
  6.     navbarPage(id = "intabset", 
  7.                title = "HOME",
  8.                windowTitle = "Data cleaning", 
  9.                theme = shinytheme("cerulean"), 
  10.                collapsible = TRUE, 
  11.                header=tags$style(
  12.                  "#actButt{
  13.     background-image: none;
  14.      background-color:red !important;
  15.       color: black;
  16.       -webkit-box-shadow: 0px;
  17.       box-shadow: 0px;
  18.            border:0px;
  19.                  }
  20.     #dwdButt{
  21.      background-color:green !important;
  22.       color: black;
  23.       -webkit-box-shadow: 0px;
  24.       box-shadow: 0px;
  25.            border:0px;
  26.                  }"),
  27.     tabPanel(
  28.       title = " Home", icon = icon("home"),
  29.       mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
  30.                 fluidRow(h3("Home page data cleaning")),
  31.                 downloadButton('dwdButt', 'Download data'),
  32.                 actionButton('actButt', 'Generate data'),
  33.                 actionButton('actButt2', 'Generate data 2',
  34.                              style = "background-color: red !important; color: black")
  35.       )
  36.     )# end tabpanel
  37.     ), # end navbarpage
  38.   server = function(input, output) {
  39.   }
  40. )

For all buttons:

  2. library(shiny)
  3. library(shinythemes)
  4. shinyApp(
  5.   ui = 
  6.     navbarPage(id = "intabset", 
  7.                title = "HOME",
  8.                windowTitle = "Data cleaning", 
  9.                theme = shinytheme("cerulean"), 
  10.                collapsible = TRUE, 
  11.                header=tags$style(
  12.                  ".btn-default{
  13.                  background-image: none;
  14.                  }
  15.                  
  16.                  #actButt{
  17.      background-color:red !important;
  18.       color: black;
  19.       -webkit-box-shadow: 0px;
  20.       box-shadow: 0px;
  21.            border:0px;
  22.                  }
  23.     #dwdButt{
  24.      background-color:green !important;
  25.       color: black;
  26.       -webkit-box-shadow: 0px;
  27.       box-shadow: 0px;
  28.            border:0px;
  29.                  }"),
  30.     tabPanel(
  31.       title = " Home", icon = icon("home"),
  32.       mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
  33.                 fluidRow(h3("Home page data cleaning")),
  34.                 downloadButton('dwdButt', 'Download data'),
  35.                 actionButton('actButt', 'Generate data'),
  36.                 actionButton('actButt2', 'Generate data 2',
  37.                              style = "background-color: red !important; color: black")
  38.       )
  39.     )# end tabpanel
  40.     ), # end navbarpage
  41.   server = function(input, output) {
  42.   }
  43. )
英文:

You need to set background-image: none; either for a single button id or for the whole class.

For one button id:

  1. library(shiny)
  2. library(shinythemes)
  4. shinyApp(
  5.   ui = 
  6.     navbarPage(id = "intabset", 
  7.                title = "HOME",
  8.                windowTitle = "Data cleaning", 
  9.                theme = shinytheme("cerulean"), 
  10.                collapsible = TRUE, 
  11.                header=tags$style(
  12.                  "#actButt{
  13.     background-image: none;
  14.      background-color:red !important;
  15.       color: black;
  16.       -webkit-box-shadow: 0px;
  17.       box-shadow: 0px;
  18.            border:0px;
  19.                  }
  20.     #dwdButt{
  21.      background-color:green !important;
  22.       color: black;
  23.       -webkit-box-shadow: 0px;
  24.       box-shadow: 0px;
  25.            border:0px;
  26.                  }"),
  27.     tabPanel(
  28.       title = " Home", icon = icon("home"),
  29.       mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
  30.                 fluidRow(h3("Home page data cleaning")),
  31.                 downloadButton('dwdButt',
  32.                                'Download data'),
  33.                 actionButton('actButt',
  34.                              'Generate data'),
  35.                 actionButton('actButt2',
  36.                              'Generate data 2',
  37.                              style = "background-color: red !important; color: black")
  38.       )
  39.     )# end tabpanel
  40.     ), # end navbarpage
  41.   server = function(input, output) {
  42.   }
  43. )

For all buttons:

  2. library(shiny)
  3. library(shinythemes)
  4. shinyApp(
  5.   ui = 
  6.     navbarPage(id = "intabset", 
  7.                title = "HOME",
  8.                windowTitle = "Data cleaning", 
  9.                theme = shinytheme("cerulean"), 
  10.                collapsible = TRUE, 
  11.                header=tags$style(
  12.                  ".btn-default{
  13.                  background-image: none;
  14.                  }
  15.                  
  16.                  #actButt{
  17.      background-color:red !important;
  18.       color: black;
  19.       -webkit-box-shadow: 0px;
  20.       box-shadow: 0px;
  21.            border:0px;
  22.                  }
  23.     #dwdButt{
  24.      background-color:green !important;
  25.       color: black;
  26.       -webkit-box-shadow: 0px;
  27.       box-shadow: 0px;
  28.            border:0px;
  29.                  }"),
  30.     tabPanel(
  31.       title = " Home", icon = icon("home"),
  32.       mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
  33.                 fluidRow(h3("Home page data cleaning")),
  34.                 downloadButton('dwdButt',
  35.                                'Download data'),
  36.                 actionButton('actButt',
  37.                              'Generate data'),
  38.                 actionButton('actButt2',
  39.                              'Generate data 2',
  40.                              style = "background-color: red !important; color: black")
  41.       )
  42.     )# end tabpanel
  43.     ), # end navbarpage
  44.   server = function(input, output) {
  45.   }
  46. )

huangapple
  • 本文由 发表于 2023年2月27日 19:20:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/75579803.html
  • css
  • html
  • r
  • shiny
  • shinythemes
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定