标头中的R闪亮的覆盖CSS文件 [英] R shiny overriding CSS file in header

问题描述

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

I'm including a CSS file in a shiny app. I include it in the ui() function prior to including a header that attempts to override the CSS file. Everything I've read indicates that the header CSS declaration should override the CSS file. However it is not overriding it unless I use the "!important" rule after the header CSS declaration. Here's the CSS file (named temp.css):

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

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

and here is the R shiny file (named 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生效：

The CSS declarations in the header for .btn-default take effect for the actionButton if any of the following are done:

1. ！important规则遵循标题中的CSS声明；


2. 不包含temp.css文件；或



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

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 。

I've also tried including other selectors in the header CSS, such as .btn and .action-button.

我还有其他东西吗？

推荐答案

如果您放入，它将按您期望的方式工作includeCSS（ temp.css），在您的head标签中。我不是专家，但我认为 tag $ head 中的所有内容均应首先评估，被其他所有内容覆盖。

It will work the way you expect it if you put includeCSS("temp.css"), in your head tag. I am no expert but I think everything in tag$head is evaluated first and is overwritten by everything else.

这篇关于标头中的R闪亮的覆盖CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！