Skip to contents

Theming

Source: vignettes/theming.Rmd
theming.Rmd

This page is specific to R. It shows how the Tree View follows the Material UI theme, set with the muiMaterial package. To style the parts of the items, see Simple Tree View - Customization.

fns <- data.frame(
  package = c("muiMaterial", "muiMaterial", "muiMaterial", "muiCharts", "muiCharts", "reactRouter", "reactRouter", "reactRouter"),
  fn = c("Button", "TextField", "Drawer", "BarChart", "PieChart", "Route", "NavLink", "useParams")
)
fns$fn_id <- paste0(fns$package, "::", fns$fn)
fn_items <- asMuiTree(fns, levels = c("package", "fn"), levels_id = c("package", "fn_id"))

Theme and dark mode

The tree view shares muiMaterial’s MUI runtime, so a muiMaterial::ThemeProvider() applies to it. The selection, focus and checkbox colors follow the theme, including dark mode.

The items inherit their text color from their parent. Set color = "text.primary" on the surrounding container so that the text follows the theme too. Alternatively, place CssBaseline() inside the ThemeProvider() to apply the theme’s colors to the whole page:

ThemeProvider(
  theme = list(
    palette = list(
      mode = "dark",
      primary = list(main = "#9819d2")
    )
  ),
  Box(
    sx = list(p = 2, bgcolor = "background.default", color = "text.primary"),
    RichTreeView(
      items = fn_items,
      checkboxSelection = TRUE,
      multiSelect = TRUE,
      defaultExpandedItems = list("muiCharts"),
      defaultSelectedItems = list("muiCharts::BarChart", "muiCharts::PieChart")
    )
  )
)

Theme values in sx

The sx argument accepts the theme values, such as the palette colors ("primary.main", "text.secondary", "divider"…) and the spacing units:

RichTreeView(
  items = fn_items,
  sx = list(
    color = "primary.main",
    fontWeight = "bold",
    "& .MuiTreeItem-groupTransition" = list(color = "text.secondary", fontWeight = "normal")
  ),
  defaultExpandedItems = list("reactRouter")
)

Bootstrap conflict

muiTreeView can conflict with the Bootstrap CSS framework, used by default in Shiny functions such as shiny::fluidPage() and friends.

Use muiMaterial::muiMaterialPage() and muiMaterial::CssBaseline() to avoid Bootstrap and get a normalized CSS. See the muiMaterial docs for more information.

library(shiny)

ui <- muiMaterialPage(
  CssBaseline(),
  RichTreeView(items = fn_items)
)

shinyApp(ui, function(input, output, session) {})

Security notes

  • JS() code runs in the browser of every visitor. Only pass fixed code to it; never build the string with paste0() or glue() from user input, URL parameters, files or databases. Put the data in the items (or other arguments) and read it inside the function, e.g. getItemLabel = JS("(item) => item.name"). To embed values computed from your own data, serialize them with jsonlite::toJSON(), which escapes them.
  • Labels given as plain strings are escaped. Never wrap untrusted text in HTML(), which is rendered as markup.
  • Values sent to Shiny come from the browser and can be forged: see Shiny.

API