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

Question

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

 .btn-default {
    color: #ffffff;
    background-color: #464545;
    border-color: #464545;
 }

这里是 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) {
   })
)

如果执行以下任一操作，则 .btn-default 标头中的 CSS 声明将对 actionButton 生效：

1. !important 规则遵循标头中的 CSS 声明；
2. 不包括 temp.css 文件；或

3. 标题声明用于按钮名称，使用：

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

我还尝试在标题 CSS 中包含其他选择器，例如 .btn 和 .action-button。

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

Answer 1

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