css - 如何更改 Leaflet for R 中的标题文本颜色？

Question

我正在尝试更改 slider 标题“Magnitudes”标题的样式/颜色，但我不知道该怎么做。我试过添加类似的东西 p {color: red} 到 tags$style 行，像这样:

  tags$style(type = "text/css", "html, body {width:100%;height:100%}", "p {color=white}"),

没有用。有任何想法吗？我认为这不是您在实际的 sliderInput 函数本身中更改的内容，而是 CSS，我只是不太明白。

library(shiny)
library(leaflet)
library(RColorBrewer)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 10, right = 10,
    sliderInput("range", "Magnitudes", min(quakes$mag), max(quakes$mag),
      value = range(quakes$mag), step = 0.1
    ),
    selectInput("colors", "Color Scheme",
      rownames(subset(brewer.pal.info, category %in% c("seq", "div")))
    ),
    checkboxInput("legend", "Show legend", TRUE)
  )
)

server <- function(input, output, session) {

  # Reactive expression for the data subsetted to what the user selected
  filteredData <- reactive({
    quakes[quakes$mag >= input$range[1] & quakes$mag <= input$range[2],]
  })

  # This reactive expression represents the palette function,
  # which changes as the user makes selections in UI.
  colorpal <- reactive({
    colorNumeric(input$colors, quakes$mag)
  })

  output$map <- renderLeaflet({
    # Use leaflet() here, and only include aspects of the map that
    # won't need to change dynamically (at least, not unless the
    # entire map is being torn down and recreated).
    leaflet(quakes) %>% addTiles() %>%
      fitBounds(~min(long), ~min(lat), ~max(long), ~max(lat))
  })

  # Incremental changes to the map (in this case, replacing the
  # circles when a new color is chosen) should be performed in
  # an observer. Each independent set of things that can change
  # should be managed in its own observer.
  observe({
    pal <- colorpal()

    leafletProxy("map", data = filteredData()) %>%
      clearShapes() %>%
      addCircles(radius = ~10^mag/10, weight = 1, color = "#777777",
        fillColor = ~pal(mag), fillOpacity = 0.7, popup = ~paste(mag)
      )
  })

  # Use a separate observer to recreate the legend as needed.
  observe({
    proxy <- leafletProxy("map", data = quakes)

    # Remove any existing legend, and only if the legend is
    # enabled, create a new one.
    proxy %>% clearControls()
    if (input$legend) {
      pal <- colorpal()
      proxy %>% addLegend(position = "bottomright",
        pal = pal, values = ~mag
      )
    }
  })
}

shinyApp(ui, server)

Answer 1

切入正题:

尝试将此添加到您的 ui:

tags$style(type = "text/css", 'label[for="range"] {color: white;}'),

---

有关您如何自行计算的更多详细信息:

下面是我将如何进行。

1. 使用 runApp() 运行您获得的代码，在浏览器中生成非常漂亮的传单 map 。

2. 右键单击该 map 并选择“查看页面源代码”以查看生成该 map 的源代码。

3. 在该源中搜索字符串 "Magnitude"，找到为您要美白的标题编码的 HTML 元素。这是我这样做时发现的:

   <label class="control-label" for="range">Magnitudes</label>
   

4. 据此构建一个 CSS 选择器(此处包括一个 "attribute selector" )，它将找到该元素，并使用它来更改颜色。添加这个，在你调用 bootstrapPage() 的第一行之后，对我有用:

   tags$style(type = "text/css", 'label[for="range"] {color: white;}'),
   

5. 再次使用 runApp() 确认编辑有效。