How to style Gatsby Theme Blog's Markdown or MDX

Gatsby Theme Blog’s Markdown order and order and unorder list is too close to each other. How to add a line height to give some white space for every list?

Please note that this approach is for gatsby-theme-blog 2.0. The version 1 has a different appraoch.

1. Create the file /src/gatsby-plugin-theme-ui/index.js
2. Add a styles object and the following code

export default {
  styles: {
    ul: {
      lineHeight: 1.75,
    },
    ol: {
      lineHeight: 1.75,
    },
  },
}

3. This “styles” object is a Theme-UI thing, use to styles markdown or MDX. Gatsby Theme Blog use ThemeUI under the hood. Visit ThemeUI to know more.
4. Add any CSS in JS code to style your Markdown in the “style” object.