CSS from theme is used instead of React App

  • Resolved rittermobile

    (@rittermobile)


    2 years, 8 months ago

    I have a react app (let’s call it jobviewer) which is built with the popular Ant design UI framework. I have set up everything correctly and the demo react app is shown in my WordPress site.

    I have built the jobviewer react app at the original folder location and then moved the build folder to /reactpress/apps/jobviewer. I have also moved the whole project to /reactpress/apps/jobviewer and started to build the app at this location.

    In the next step I switched to WordPress and clicked on “Update Dev-Environtment” to update the index.html of my local react dev environment. It should then match the styles of my WordPress installation.

    The react app is loaded within the WordPress site but my react app has lost its design and it looks like the CSS from the Word Press theme is overriding the CSS from the Ant design. Any suggestions how to fix this?

    • This topic was modified 2 years, 8 months ago by rittermobile.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author rockiger

    (@rockiger)

    2 years, 8 months ago

    Uff, it probably makes sense to use different css class names in your react app than in your WP theme.

    I don’t know your WP theme and where in the HTML it loads the css. Maybe it makes sense the put the line

    @import '~antd/dist/antd.css';

    at the end in the WP theme, instead of calling it in your react app.

    Ant uses Less, maybe there a way to bump the specificity of there created css classes.

    Hope that helps.

    Plugin Author rockiger

    (@rockiger)

    2 years, 8 months ago

    @rittermobile Could you solve your problems with the CSS?

    Thread Starter rittermobile

    (@rittermobile)

    2 years, 8 months ago

    I am quite sure that it’s actually a CSS / theme issue which has nothing really to do with reactpress. The used theme is setting some CSS selectors (for example input) which are used by ant design but not set in ant design. I am sure if I overwrite the specific selectors in my react app then it will work as expected.

    Plugin Author rockiger

    (@rockiger)

    2 years, 8 months ago

    @rittermobile Cool, I would be happy to see the result, when it goes live.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS from theme is used instead of React App’ is closed to new replies.

Tags