Question

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

tabLayout.setSelectedTabIndicatorHeight(0);

这里是R闪亮文件（名为app.R）：

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

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

！important规则遵循标题中的CSS声明;
不包含temp.css文件;或

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

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中包含其他选择器，例如HTML("#testButton { background-color: rgb(40,110,5); color: rgb(199,207,111); }"和.btn。

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

Answer 1

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

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

1 个答案: