🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
15 : 05 : 49 : 23
1×
Become a member
to unlock all features
Autoplay

    Style Components Rendered By MDX with Theme UI in Gatsby

    John OtanderJohn Otander
    reactReact
    gatsbyGatsby

    Theme UI provides a wrapper around the MDXProvider so you can add styling to components that are rendered in your MDX documents. The styling you add will not be leaked as global styles since it relies on React Context and Emotion. The values set in the styles object are theme-aware so you can ensure consistency when applying color and typographic styles to your content.

    This lesson uses gatsby-plugin-theme-ui in order to seamlessly integrate Theme UI into a Gatsby site.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Here, we have a running Gatsby site with gastby-plugin-theme-ui and gatsby-plugin-mdx configured.

    First, we can open up Gatsby-plugin-theme-ui/index.js. This a shadowed file that overrides the default theme. First, we can create styles object which maps to all elements in MDX. First, we'll begin with the root so we can add typographic styling to all child elements.

    First, we can set fontWeight which pulls from our fontWeights object. We can set the fontFamily which pulls from our fonts object. Actually, we can set the lineHeights. With the root styling set, we now need to use the root component in order to persist styling to child elements.

    We can open up our layout, import Styled from theme-ui, then wrap our application. When Gatsby reloads we'll now see our styling being picked up.

    Back in our theme file we can begin adding additional styling to our pre. Let's invert it by setting the background color to the text and the text color to the background color.

    We can further improve this by adding some padding. We'll set it to be an array of three, four, five so on mobile it'll pick up the third step of our space scale, for tablet four, and five for desktop. Let's set border radius as well. Not bad.

    It's also common to want to customize color of a link. We can do so by adding an A object for anchor in our styles. Here we'll set the color to primary, which will pull from our colors object. It's a blue jean blue.

    You can also apply pseudo classes. Here on hover let's get rid of the underline. Something useful about theme-ui is you can reach these components outside the context MDX. You just need to import style like we did root.

    Here we can use the pre tag again and we'll see the inverted styling. All together we've imported style from theme-ui and then wrapped our layout and styled that root to pick up typographic styling. In our theme we've also specified a styles object where we've set styling for root, pre, and anchors.