CODEWITHSUNDEEP
javascriptcssreactjs
Kotsias
Kotsias

Reputation: 3

Overwrite css styling in React

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.

Upvotes: 0

Views: 359

Answers (1)

hhhhhhh
hhhhhhh

Reputation: 441

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.

Upvotes: 1

Related Questions