R Shiny 如何在头部覆盖 CSS 文件？

Question

我在一个shiny app中包含了一个CSS文件。在包含尝试覆盖CSS文件的标头之前，我在ui()函数中包含了它。我阅读的所有内容都表明，标头CSS声明应该覆盖CSS文件。然而，除非我在标头CSS声明后使用"!important"规则，否则它不会覆盖它。这是CSS文件（命名为temp.css）：

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

以下是 R Shiny 文件（命名为 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) {
   })
)

中的CSS声明对.actionButton生效，如果执行以下任何操作：

1. the !important rule follows the CSS declarations in the header;
2. the temp.css file is not included; or

3. the header declaration is for the button name, using:

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

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

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

- datatoolbox

Answer 1

如果您在头标签中加入includeCSS("temp.css")，它将按照您的预期工作。我不是专家，但我认为tag$head中的所有内容都会首先被评估，并被其他所有内容覆盖。

- Alex

---

谢谢！这确实是我需要做的。我把includeCSS()行移动到了tags$head()和tags$style()行之间，现在一切都按预期工作了。 - datatoolbox

这非常有用。尝试了几天后，我唯一能够强制覆盖某些标准加载的dataTable css中的!important标签的方法是将需要覆盖!important标签的标签粘贴在多个tags$style(HTML(...))行中。 - scabecks