Blog outpout styling

blogpost.jsx

import React from 'react'
import RehypeReact from 'rehype-react'

/* Importing styled or react components */

import {
  Headline1,
} from './content'

/* Mapping the components to the markdown output */

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: {
    h1: Headline1
  }
}).Compiler

/* Rendering the blogpost with our mapping */

export default ({ data }) => {
  const post = data.markdownRemark

  return (
    <div className='blogpost-content'>
     {renderAst(post.htmlAst)}
    </div>
  )
}

content.jsx

/*
 * Define simple styled or react components
 */

export const Headline1 = (props) => {
  return (
    <h1
      style={{
        color: 'red';
      }}>
      {props.children}
    </h1>
  )
}