Skip to contents

CSS Baseline

Source: vignettes/css-baseline.Rmd
css-baseline.Rmd
This page is an adaptation of the related MUI Material UI documentation page.

CSS Baseline

The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.

Global reset

You might be familiar with normalize.css, a collection of HTML element and attribute style-normalizations. Add CssBaseline() once, at the top of your page:

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  CssBaseline(),
  # The rest of your application
  Typography("Hello")
)

Scoping on children

However, you might be progressively migrating a website to Material UI, using a global reset might not be an option. It’s possible to apply the baseline only to the children by using the ScopedCssBaseline component. This is useful, for example, when mixing MUI components with a Bootstrap page (see CSS conflicts with Bootstrap):

ScopedCssBaseline(
  # The rest of your application
  Typography("Hello")
)

Approach

Page

The <html> and <body> elements are updated to provide better page-wide defaults. More specifically:

  • The margin in all browsers is removed.
  • The default Material Design background color is applied. It’s using theme.palette.background.default for standard devices and a white background for print devices.
  • If enableColorScheme is provided to CssBaseline, native components color will be set by applying color-scheme on <html>. The value used is provided by the theme property theme.palette.mode.

Layout

  • box-sizing is set globally on the <html> element to border-box. Every element (including *::before and *::after) is declared to inherit this property, which ensures that the declared width of the element is never exceeded due to padding or border.

Color scheme

This API switches between "light" and "dark" modes of native components such as scrollbar, using the color-scheme CSS property. To enable it, you can set enableColorScheme = TRUE as follows:

CssBaseline(enableColorScheme = TRUE)
# or
ScopedCssBaseline(enableColorScheme = TRUE, "The rest of your application using color-scheme")

Typography

  • No base font-size is declared on the <html>, but 16px is assumed (the browser default). You can learn more about the implications of changing the <html> default font size in the theme documentation page.
  • Set the theme.typography.body1 style on the <body> element.
  • Set the font-weight to theme.typography.fontWeightBold for the <b> and <strong> elements.
  • Custom font-smoothing is enabled for better display of the Roboto font.

Here is a scoped baseline next to unstyled content. The scoped part gets the MUI body typography and background:

muiMaterialPage(
  Box(
    sx = list(display = "flex", gap = 2),
    Box(sx = list(p = 2, border = 1, borderColor = "divider", flex = 1), tags$b("Without baseline"), tags$p("Plain text.")),
    ScopedCssBaseline(
      Box(sx = list(p = 2, border = 1, borderColor = "divider"), tags$b("With ScopedCssBaseline"), tags$p("Plain text."))
    )
  )
)

Customization

Head to the global customization section of the documentation to change the output of these components. In R, GlobalStyles() adds global CSS rules with the same syntax as sx:

muiMaterialPage(
  CssBaseline(),
  GlobalStyles(styles = list(".highlight-me" = list(backgroundColor = "#fff59d", padding = "0 4px"))),
  Typography("Some ", tags$span(class = "highlight-me", "highlighted"), " text.")
)