MDX Blocks

  • Home
  • GitHub
  • Get Started
  • Getting Started
  • Layouts
  • BlocksProvider
  • Themes
  • Creating Themes
  • Creating Layouts
  • Primitives
  • API

Themes

Themes in MDX Blocks consist of two parts:

  • theme (object) a Styled System theme object
  • theme.styles (object) component styles, with support for Styled System props

MDX Blocks includes a base theme by default that has minimal styling and is intended to make customization easier.

Built-in Themes

MDX Blocks includes several built-in themes that can be used out-of-the-box or serve as a basis for custom themes. To use a built-in theme, import it and pass it to the BlocksProvider component at the root of your application.

import React from 'react'
import { BlocksProvider } from 'mdx-blocks'
import { future } from 'mdx-blocks/themes'

export default props =>
  <BlocksProvider {...future}>
    {props.children}
  </BlocksProvider>

Currently the following themes are available:

  • funk
  • future
  • roboto

Components Object

The components object in MDX Blocks maps to MDX components

components: {
  h1: props => <h1 {...props} />,
}

Styles Object

Styled System props can be used for color, spacing, and typography, allowing you to use values from the theme object. For example, the following picks up font size and colors from the theme:

theme: {
  styles: {
    h1: {
      fontSize: 6,
      color: 'primary',
    },
  }
}

The Styled System props can also accept arrays for mobile-first responsive styles.

components: {
  h1: {
    // responsive font size
    fontSize: [4, 5, 6],
  },
}

Layout Blocks

Each layout component accepts a styles prop to create contextual style changes on a per-block basis. These nested blocks will inherit components and styles from the parent BlocksProvider component.

  • MDX Blocks
  • Docs
  • GitHub