ReactPress styles conflict with WordPress theme

  • I’m working with ReactPress on my Local system, when I connect the CRA folder it shows up as expected but when I run the server the styles come out broken and conflicted with the theme. In the docs here: React with WordPress Tutorial – Rockiger, I see you mention a canvas and full width template. Where the canvas overrides these WordPress page templates. This sounds like something that would work but I didn’t see concrete information on how to use that option.

    The styles should look similar to this :

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author rockiger

    (@rockiger)

    Hi @ddboy19912,

    to use the canvas, go to the page where added your ReactPress app in the WordPress. You can change the template of that page in the admin to ReactPress canvas.

    Best

    Thread Starter ddboy19912

    (@ddboy19912)

    Hey,
    Thank you so much that did the trick for me. Now when I export the build. I don’t get the images, fonts or icons in the frontend. I didn’t make any changes to the package files. It just happens this way.

    Thread Starter ddboy19912

    (@ddboy19912)

    I’ve been able to solve the styling problem. I was testing the build in my local environment so i just needed to make sure the path was same with the React directory and it was fine. Thanks a lot again

    im having the same issue, but in my case i want to keep the header & footer of my WP theme and implement my react app on this page, is that possible?
    (the styles of the WP theme override my react style)

    Plugin Author rockiger

    (@rockiger)

    You will need to add a higher specificity to your React app’s CSS. If you’re using SCSS it could be something like this:

    #root { /* the id of the React app's root element
  /* ... add your styles here */
}

    This also works in plain CSS with newer browsers.

    There are, of course, other methods to achieve this.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘ReactPress styles conflict with WordPress theme’ is closed to new replies.

Tags