How to use the theme-ui.Styled.p function in theme-ui

/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';

/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;

export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;

/* Layout/Variant */
export const Main = ({children}) =&gt; <main>{children}</main>;
export const Section = ({children}) =&gt; <section>{children}</section>;
export const Header = ({children}) =&gt; <header>{children}</header>;
export const Nav = ({children}) =&gt; <nav>{children}</nav>;
export const Footer = ({children}) =&gt; <footer>{children}</footer>;
export const Link = ({a, children}) =&gt; (
  
    {children}
  
);

/*