How to apply styles on posts from wordpress

🙋Get Help
,
1
  1. i am not able to apply styles on posts coming from wordpress, it just renders html fetched from wordpress but i can not find anything about styling that content.
    Ex.
<Content>
<Html2React html={post.content.rendered} />
</Content>

how can i design different elements that are in post.content.rendered

  1. Already designed elements from wordpress styles also didn’t applied on frontity side.
3

Hi @ujjaval.barot

To apply custom styles to some elements coming from Wordpress (paragraphs, divs, elements with a specific class…) you have two main options:

Using Global to add global styles

You can use <Global> to add global styles that match the elements you want to “style”. With this component you add global styles as if you were adding a CSS file

import { Global, css } from "frontity";

const Page = () => (
  <>
    <Global
      styles={css`
        body {
          margin: 0;
          font-family: "Roboto";
        }
      `}
    />
    <OtherContent />
  </>
);

This method is not really recommended because with this method of styling methods, Frontity will not be able to optimize the final bundles and optimize the performance of your site

Using processor to manipulate HTML elements

The package @frontity/html2react allows you to add processors which you can use to parse the HTML returned by the REST API, detect specific elements and process them (for example adding styles or return a specific React component)

Here you can see an example of a processor that is “intercepting” any <code> tag served by the REST API and is adding custom styles to it

This method is more aligned with Frontity’s philosophy as it will allow the framework to optimize the bundles

More info about how Frontity manages styles and why can be found here

If you could provide a repository with the code of your project, the community (or any member of the Frontity team) would be able to clone your project and try to reproduce the issue you’re having
With this info, it’ll be much easier to help you with your issue

If you can’t share your whole project, please create a CodeSandbox (you can start with this template) or a GitHub repository with the minimal amount of code to reproduce the issue.

Hope this helps

3 Likes