What are the best methods for preventing scss styles from leaking between pages?

Question

What are the best methods for preventing scss styles from leaking between pages?

I'm currently working on a project that includes the following files:

/* styles/1.scss */
body {
  /* Some other styles not related to background-color */
}

/* styles/2.scss */
body {
  background-color: blue;
}

// pages/one.js
import "../styles/1.scss";

export default ()=>(
  <div>Hello, One!</div>
)

Upon visiting localhost:3000/one, I noticed that the background turns blue even though no style for background-color is defined in 1.scss!

I suspect this issue might be related to css modules, so I attempted wrapping 2.scss with :local. I also tried renaming 2.scss to 2.module.scss, but it did not fix the problem.

Any suggestions on how to resolve this? I appreciate your assistance!

Edit: You can view this issue on codesandbox: https://codesandbox.io/s/priceless-flower-oswh1

If the background color is not orange, try clicking "Go to two" and then return to one. The orange background will persist.

javascript css next.js

Answer 1

Answer №1

When styling the body element or providing css resets, global styles are necessary.

Method 1:

// one.js
import Link from "next/link";

export default () => (
  <div>

    <style jsx global>{`
      body {
        background-color: red;
      }
    `}</style>

    Hello, One!
    <Link href="/two">
      <a>Go to two</a>
    </Link>
  </div>
);

and

// two.js
import Link from "next/link";

export default () => (
  <div>

    <style jsx global>{`
      body {
        background-color: orange;
      }
    `}</style>

    Hello, Two!
    <Link href="/one">
      <a>Go to one</a>
    </Link>
  </div>
);

You can alternatively store the style in a separate file and import it as needed.

Method 2:

// styles/one_style.js
import css from "styled-jsx/css";

export default css.global`
  body {
    background-color: red;
  }
`;

and

// one.js
import globalStyles from "../styles/one_style";
import Link from "next/link";

export default () => (
  <div>

    <style jsx global>
      {globalStyles}
    </style>

    Hello, One!
    <Link href="/two">
      <a>Go to two</a>
    </Link>
  </div>
);

Code Sandbox

I trust this information will be beneficial to you.

Answer 2

When styling the body element or providing css resets, global styles are necessary.

Method 1:

// one.js
import Link from "next/link";

export default () => (
  <div>

    <style jsx global>{`
      body {
        background-color: red;
      }
    `}</style>

    Hello, One!
    <Link href="/two">
      <a>Go to two</a>
    </Link>
  </div>
);

and

// two.js
import Link from "next/link";

export default () => (
  <div>

    <style jsx global>{`
      body {
        background-color: orange;
      }
    `}</style>

    Hello, Two!
    <Link href="/one">
      <a>Go to one</a>
    </Link>
  </div>
);

You can alternatively store the style in a separate file and import it as needed.

Method 2:

// styles/one_style.js
import css from "styled-jsx/css";

export default css.global`
  body {
    background-color: red;
  }
`;

and

// one.js
import globalStyles from "../styles/one_style";
import Link from "next/link";

export default () => (
  <div>

    <style jsx global>
      {globalStyles}
    </style>

    Hello, One!
    <Link href="/two">
      <a>Go to two</a>
    </Link>
  </div>
);

Code Sandbox

I trust this information will be beneficial to you.

What are the best methods for preventing scss styles from leaking between pages?

Answer №1

Similar questions

Incorporating ScrollMagic and GSAP into Next.js: A Step-by-Step

Exploring Ways to Access Console.log() from Client Pages in Next.js

Getting access to scope variables in an Angular controller written in ES6 style can be achieved by using

Ways to transmit the appropriate model

Steps to execute a JSON file once another JSON has been successfully loaded

When you use jQuery's serialize() method on a form element, it will only serialize one form element at a time

Creating interactive web applications with Python Flask by utilizing buttons to execute functions

Avoid invoking a TypeScript class like a regular function - _classCallCheck prevention

Using VueJS to showcase user input in a dynamic list and a pop-up modal

Merge the JSON data with the Node.js/Express.js response

Streamline the process of renaming or remapping keys in a collection of JavaScript/JSON objects

Incorporate a background only if the specified condition in AngularJS is met, utilizing ng-style

What is the best way to choose the unique identifier of an HTML element inside a for loop in a Django template?

The search box output will be the same as the JSON result

A declaration of "import '***.css';" was located within an ECMAScript module file in the monaco-editor npm library

Consolidate two AJAX requests into a single callback

What is the best way to use jQuery to listen for a container resizing event?

Removing div elements containing specific text using jQuery

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

What is the best way to access the properties of individual objects within an array of objects in a MongoDB MapReduce JavaScript query?