Question

为什么以下闪亮的仪表板代码不会将徽标背景颜色更改为红色？有没有办法查看预设的CSS样式，因为这可能与此有关？

library(shiny)
library(shinydashboard)

ui <- dashboardPage(

  dashboardHeader(title = "MY TITLE"),

  dashboardSidebar(

    tags$head(tags$style(HTML('
                                /* logo */
                                .logo {
                                background-color: #FF5733;
                                }
                                ')))


  ),

  dashboardBody(

  )
)

server <- function(input, output){
}

shinyApp(ui = ui, server = server)

我知道使用以下代码会将徽标背景色变成红色，但是我不明白为什么我需要指定.skin-blue .main-header和.logo

.skin-blue .main-header .logo {
                                background-color: #FF5733;
                                }

我将上述闪亮的仪表板代码中的html主体代码输出到RStudio控制台中（头代码未出现在控制台中）。我将其粘贴到html文档中，然后自己添加了head和style标签。仅使用.logo

时，徽标背景颜色会变为红色。

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* logo */
      .logo {background-color: #FF5733;}
    </style>
  </head>
  <body class="skin-blue" style="min-height: 611px;">
      <div class="wrapper">
        <header class="main-header">
          <span class="logo">MY TITLE</span>
          <nav class="navbar navbar-static-top" role="navigation">
            <span style="display:none;">
              <i class="fa fa-bars"></i>
            </span>
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
              <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu">
              <ul class="nav navbar-nav"></ul>
            </div>
          </nav>
        </header>
        <aside id="sidebarCollapsed" class="main-sidebar" data-collapsed="false">
          <section id="sidebarItemExpanded" class="sidebar"></section>
        </aside>
        <div class="content-wrapper">
          <section class="content"></section>
        </div>
      </div>
    </body>
</html>

为什么我需要指定多个CSS类来更改背景颜色？

0 个答案: