是否可以在 R 和/或 LeafletR 的 htmlwidget 中包含自定义 css

Question

我想对我的传单地图进行一些样式更改。

是否可以包括

• 样式元素或
• CSS 文件的自定义路径

要么通过 htmlwidgets for R 还是 LeafletR？

最好

Answer 1

由于您的问题中没有任何代码，因此很难回答。 我会尝试一个答案。 有两种方法可以将自定义CSS添加到htmlwidget。 我会预先警告，但您需要非常具体或使用!important覆盖，因为已经有相当多的CSS自动添加到leaflet中。

简单但不太坚固

htmlwidgets可以与htmltools包中的tags结合使用。

library(leaflet)
library(htmltools)
# example from ?leaflet
m = leaflet() %>% addTiles()
# there are two approaches to the custom css problem
#  1.  the easy but less robust way
browsable(
  tagList(list(
    tags$head(
      # you'll need to be very specific
      tags$style("p{font-size:200%;}")
      # could also use url
      #tags$link(href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css",rel="stylesheet")
    ),
    m
  ))
)

使用htmlDependency 更健壮

您还可以使用htmlDependency来处理由重复引起的冲突。

#  2.  you can add dependencies to your leaflet map
#  this mechanism will smartly handle duplicates
#  but carries a little more overhead
str(m$dependencies)  # should be null to start
# 
m$dependencies <- list(
  htmlDependency(
    name = "font-awesome"
    ,version = "4.3.0"
    # if local file use file instead of href below
    #  with an absolute path
    ,src = c(href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css")
    ,stylesheet = "font-awesome.min.css"
  )
)
m

Answer 2

我遵循了 timelyportfolio browsable（） 方法，但你会有一个小的地图窗口。要解决此问题，您必须添加：100vw 和 100vh 以传单并从身体上去除边缘。

例如：

library(leaflet)
library(htmltools)
# example from ?leaflet
m = leaflet(height = '100vh', width = '100vw') %>% addTiles()
# there are two approaches to the custom css problem
#  1.  the easy but less robust way
browsable(
  tagList(list(
    tags$head(
      # you'll need to be very specific
      tags$style("p{font-size:200%;} body{margin: 0px;}")
      # could also use url
      #tags$link(href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css",rel="stylesheet")
    ),
    m
  ))
)