使用 CSS 將 shiny 導航欄中的文本顏色更改為 hover

Question

我使用“平淡”的 shiny 主題創建了一個 shiny 儀表板。 但是，當我 hover 超過它們時，主題使我的導航欄標題變成綠色。 我寧願他們變成橙色。 我嘗試使用自定義 html 代碼修改它，但沒有任何變化。

我嘗試過的代碼是：

ui <- navbarPage(theme = shinytheme('flatly'), collapsible = TRUE,
                 
                 
                 HTML('<a style="text-decoration:none;cursor:default;color:#FFFFFF;" class="active" href="#">World Happiness Dashboard</a>'), id="nav",
                 
                 tags$head(tags$style('.navbar-nav .nav-item.active .nav-link,
                                      .navbar-nav .nav-item:hover .nav-link {
                                        color:orange;
                                      }')),
                 
                 windowTitle = "World Happiness Dashboard",

Answer 1

解決問題的最佳方法是使用瀏覽器開發工具對要更改的元素進行檢查。 在開發工具中，您將能夠將 css 屬性覆蓋為您的自定義，並查看它是否有效。 記下元素的名稱（元素所在標簽的名稱，可以證明是一個 div），並在您的 css 代碼中使用它來覆蓋它。

這是您需要的： https://developer.chrome.com/docs/devtools/

Answer 2

使用sass package 很容易實現。這是一個循序漸進的方法：

1. 創建一個 SASS 文件並將其命名為my-style.sass
2. 在 SASS 文件中，添加您要更改的內容。 按照@raOliveira 的建議，您需要在瀏覽器中進行一些挖掘，但對於您的情況，您可能需要添加以下內容：

.navbar-default:hover .navbar-nav>li>a:hover
  color: orange

.navbar-default .navbar-brand:hover
  color: orange

3. 如果您還沒有文件夾www ，請添加它。
4. 在app.R文件或global.R文件的開頭運行此代碼：

library(sass)

sass(
  sass_file("my-style.sass"),
  output = "www/my-style.css"
)

這將基於您創建的 SASS 文件創建自定義 CSS。

5. 在您的 shiny 用戶界面中引用 CSS：

tags$head(
    tags$link(href = "my-style.css", rel = "stylesheet", type = "text/css")
  )

可重現 Shiny 代碼

library(shiny)
library(sass)

sass(
  sass_file("my-style.sass"),
  output = "www/my-style.css"
)

ui <- navbarPage(
  title = "test",
  theme = shinythemes::shinytheme('flatly'),
  collapsible = TRUE,
  tags$head(
    tags$link(href = "my-style.css", rel = "stylesheet", type = "text/css")
  ),

  tabPanel("Plot"),
  tabPanel("Summary"),
  tabPanel("Table")

)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Output：

當我輸入 hover 時，選項卡和標題是橙色的：