标头中的R闪亮的覆盖CSS文件

dat*_*box 5 css r shiny

我在一个闪亮的应用程序中包含一个CSS文件。在包含尝试覆盖CSS文件的标头之前,我将其包含在ui()函数中。我读过的所有内容都表明标头CSS声明应覆盖CSS文件。但是,除非我在标头CSS声明之后使用“!important”规则,否则它不会覆盖它。这是CSS文件(名为temp.css):

 .btn-default {
    color: #ffffff;
    background-color: #464545;
    border-color: #464545;
 }
Run Code Online (Sandbox Code Playgroud)

这是R闪亮文件(名为app.R):

library(shiny) 

shinyApp(
   ui <- shinyUI(
      fluidPage( 

         # # Set up the basic CSS styling.
         includeCSS("temp.css"),

         # HTML header with style specifications.
         tags$head(
            tags$style(

               # Colorize the actionButton.
               HTML(".btn-default {
                         background-color: rgb(40,110,5);
                         color: rgb(199,207,111);
                     }"
               )
            )
         ),
         fluidRow(
            sidebarPanel(

               # Insert a button.
               actionButton(
                  inputId = "testButton", 
                  label = "Click Here"
               )
            )
         )
      )
   ),

   server <- shinyServer(function(input, output, session) {
   })
)
Run Code Online (Sandbox Code Playgroud)

如果完成以下任一操作,.btn-default头中的CSS声明将对actionButton生效:

  1. !important规则遵循标头中的CSS声明;
  2. temp.css文件不包括在内;要么
  3. 标头声明用于按钮名称,使用:

               HTML("#testButton {
                         background-color: rgb(40,110,5);
                         color: rgb(199,207,111);
                     }"
    
    Run Code Online (Sandbox Code Playgroud)

我还尝试了在标头CSS中包含其他选择器,例如.btn.action-button

还有什么我应该做的吗?这是一个闪亮的问题吗?

Ale*_*lex 3

includeCSS("temp.css"),如果您放入 head 标签,它将按照您期望的方式工作。我不是专家,但我认为其中的所有内容都会tag$head首先被评估,然后被其他内容覆盖。