custom styling with prependContent

[timelyportfolio]

I'm not sure there is a broad enough use case for custom CSS styling to add to this package, but I thought I would mention this in case someone is interested. I know I have seen a couple of htmlwidgets that used JavaScript to inject page-wide custom CSS. I think using an id selector with CSS specificity might be a better solution. Here is some quick code and post to illustrate the concept.

library(htmltools)
library(htmlwidgets)
library(rpivotTable)

# define function to help apply custom css
#  to htmlwidgets using css specificity with id
style_widget <- function(hw=NULL, style="", addl_selector="") {
  stopifnot(!is.null(hw), inherits(hw, "htmlwidget"))

  # use current id of htmlwidget if already specified
  elementId <- hw$elementId
  if(is.null(elementId)) {
    # borrow htmlwidgets unique id creator
    elementId <- sprintf(
      'htmlwidget-%s',
      htmlwidgets:::createWidgetId()
    )
    hw$elementId <- elementId
  }

  htmlwidgets::prependContent(
    hw,
    htmltools::tags$style(
      sprintf(
        "#%s %s {%s}",
        elementId,
        addl_selector,
        style
      )
    )
  )
}

# use rpivotTable to illustrate the effect
rp <- rpivotTable(UCBAdmissions, height=200)

browsable(
  tagList(
    rp,
    style_widget(hw=rp, "font-family:monospace;"),
    style_widget(hw=rp, "font-size:150%; color:purple;", "table td")
  )
)

[imfm]

YOU ARE MY HERO!!!