How do I override global styles in nextJS-CodePudding

I have some css rules in my global.css file, how do I override these stylings for specific pages?

CodePudding user response：

NextJs comes bundled with styled-jsx. You can leverage this library to insert css rules in the page, which can override rules set by your global css file.

export default () => (
  <div>
    <style jsx global>{`
      body {
        background: red;
      }
    `}</style>
  </div>
)

CodePudding user response：

Simply create a class or id in the top level element of the page. After you‘ve done that, override the styles you want by specifying new styles with the selector of the page. By doing that, the styles will be more specific than the global css-rules, which will therefore be overriden.

See an example below.

 // global.css
 p {
   font-size: 1.2rem;
 }

 // Style to load on the page that has a top level selector of #landing-page.
 #landing-page p {
   font-size: 2rem;
 }

An other alternative would be to use a layout component that is defined per page level, and load the global styles in there, if needed. Checkout this link.