How to style HTML elements passed into MDXRenderer?

i'm building a blog with gatsbyjs where blog posts are .md files and are statically rendered as HTML pages. i've managed to style the title, date, and published data, but anything under the --- is in times new roman. i've looked everywhere for inline styling tags for MDXRenderer but have had no luck. is this supported and if not, how can i style my body content? thanks!

index.md

---
title: Third Post!
date: 2020-09-10
published: true
---

This is my third post!

How my achievements mock me! -William Shakespeare

index.md

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import styled from "styled-components"
import Navbar from "../components/Navbar.js"

const Body = styled.body`
    width: 100%;
    background-color: #DBDCE0;
    height: 100%;
`

const Heading1 = styled.h1`
    font-family: Arial;
`

const Paragraph = styled.p`
    font-family: Arial;
`

const ApplyButton = styled.button`
    background-color: #EC1B2F; 
    border: none;
    color: white;
    padding: 10px 40px;
    text-align:center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
`

export const query = graphql`
    query PostsByID($id: String!) {
        mdx(
            id: { eq: $id }
        ){
            body
            frontmatter {
                title
                date(formatString: "YYYY MMMM DD")
            }
        }
    }
`

export default ({ data }) => {
    const { frontmatter, body } = data.mdx
    return (
        <Body>
        <div>
            <Navbar/>
            <Heading1>{frontmatter.title}</Heading1>
            <Paragraph>{frontmatter.date}</Paragraph>
            <MDXRenderer>{body}</MDXRenderer>
            <ApplyButton>Apply</ApplyButton>
        </div>
        </Body>
    )
}