How to use the frontity.styled.p function in frontity

<title id="{titleId}">
      &lt;/Link&gt;
      &lt;Postdetails&gt;
        &lt;DateFormat date={item.date} /&gt;
      &lt;/Postdetails&gt;
      &lt;p&gt;
        &lt;span dangerouslySetInnerHTML={{__html: excerptPlain} } /&gt;
        &lt;Link link={item.link} id={readmoreId} ariaLabelledby={readmoreId + ' ' + titleId }&gt;Leer&nbsp;más&lt;/Link&gt;
      &lt;/p&gt;
    &lt;/Article&gt;
  );
};

export default connect(Item);

const Postdetails = styled.p`
  --margin-bottom: 1;
`;

const Title = styled.h2`
  --margin-bottom: 0;
`;

const Article = styled.article`
  --margin-bottom: 3;
`;

</title>

margin: 0;
  padding: 24px;
`;

const Title = styled.h1`
  margin: 0;
  margin-top: 24px;
  margin-bottom: 8px;
  color: rgba(12, 17, 43);
`;

const StyledLink = styled(Link)`
  padding: 15px 0;
`;

const Author = styled.p`
  color: rgba(12, 17, 43, 0.9);
  font-size: 0.9em;
  display: inline;
`;

const Fecha = styled.p`
  color: rgba(12, 17, 43, 0.9);
  font-size: 0.9em;
  display: inline;
`;

/**
 * This component is the parent of the `content.rendered` HTML. We can use nested
 * selectors to style that HTML.
 */
const Content = styled.div`

};

export default connect(SearchResults);

const IntroText = styled(SectionContainer)`
  width: 100%;
  margin-top: 2rem;
  font-weight: initial;

  @media (min-width: 700px) {
    font-size: 2rem;
    margin-top: 2.5rem;
  }
`;

const Text = styled.p`
  margin: 0 0 1em 0;
  &:last-child {
    margin-bottom: 0;
  }
`;

const SearchContainer = styled(SectionContainer)`
  padding-top: 5rem;
  @media (min-width: 700px) {
    padding-top: 6rem;
  }
`;

const Credits = styled.div`
  @media (min-width: 700px) {
    display: flex;
  }
`;

const Copyright = styled.p`
  font-weight: 600;
  margin: 0;

  @media (min-width: 700px) {
    font-weight: 700;
  }
`;

const PoweredBy = styled.p`
  color: #6d6d6d;
  display: none;
  margin: 0 0 0 2.4rem;

  @media (min-width: 700px) {
    display: block;
  }
`;

<title tabindex="-1">
        {data.isPost &amp;&amp; (
          &lt;Postdetails&gt;
            &lt;DateFormat date={ post.date } /&gt;
          &lt;/Postdetails&gt;
        )}
        &lt;libraries.html2react.Component html={post.content.rendered} /&gt;
        { data.isPost &amp;&amp; libraries.comments &amp;&amp; &lt;libraries.comments.Comment /&gt; }

    &lt;/div&gt;
  ) : null;
};

export default connect(Post);

const Postdetails = styled.p`
  --margin-bottom: 2;
`;

const Title = styled.h1`
  --margin-top: 1;
  --margin-bottom: .5;
`</title>