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

Error: Surprising token found in ReactJS application on CodeSandbox

JQuery user interface dialog button

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Exploring ways to retrieve the result of a function within Next.js?

Maintaining the proportions of images in different screen sizes when resizing

What's the most effective method for identifying a pattern within a string of text?

Customizing the jQuery Datepicker to only allow a predefined set of dates

An unanticipated issue has arisen with the Alert Open Error. The command "browser.switchTo().alert().accept();" functions properly in Firefox, but encounters difficulties in Chrome while executing via Jenkins

Updating model values while dragging with Angular Dragular

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

I keep receiving a 400 (Bad Request) error when trying to delete with my REST API

Display tables side by side using Material-UI

``How can I extract the last string in Vue.js when working with string processing?

Problem with character encoding in Node.js

One way to dynamically track if any radio buttons in a group have been selected is by utilizing JQuery

Navigating the issue of "Experiencing additional hooks rendered compared to the previous render"

Error occurs in Query component when using a higher order component (HOC) due to element type

Troubleshooting a Vue 2 component's prop receiving an incorrect value

Beautiful prompt interface for HTML

tips for passing value to the date field using proctractor