0

So in the app.js file, I've imported an style.css file that contains lots of site-wide styling options. But, in a different page(about page) parallax scrolling (using react-spring) doesn't work. So my question is, can I somehow overwrite app.js styling in aboutpage.js page?

Thank you all!

I removed the style.css from app.js and aboutpage.js worked correctly.

2
  • You could locally scope the about page style to just that component by using CSS modules perhaps...? Commented Oct 31, 2022 at 1:55
  • Please provide enough code so others can better understand or reproduce the problem. Commented Oct 31, 2022 at 7:26

1 Answer 1

1

App.js is what your app is rendered on. So, every page has those imports.

You can use simple logic when the app is mounted to import, or not the style.css file using the React-Router.

Here's how you'd do it.

In your App.js, you'd no longer import at the top, but in a useEffect:

  const location = useLocation();

  useEffect(() => {
    if (location.pathname === "/about") {
      console.log("It looks like we're in about, no import.");
    } else {
      console.log("It looks like we are outside of about, importing style.css");
      import("/styles/style.css"); // change the path!
    }
  }, []);

Remember to import useLocation.

console.log() is obviously only there to make it easier to understand the logic and to test it on your side.

Sign up to request clarification or add additional context in comments.

2 Comments

Thank you so much for such quick reply, it worked.
No problem Kotsias! Do not hesitate to post more questions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.