next.js the introduction of learning notes – css

Method 1: global ingestion

create a new _app.tsx file under the pages folder (next there is an app root component, new _app.tsx is rewriting the file)

// _app.tsx file
import "../styles.scss"
export default ({Component, pageProps}) => (
  // Component represents a dynamic component, which points to different components following different access addresses
  <Component {...pageProps} />
)

Method 2: module introduction

the style file name for the method must be xxx.module.scss

// page file in pages
import styles from "./index.modules.scss"
const Index = () => {
   return (
       <>
         <h2 className={styles.xxxx}>pageIndex</h2>
       </>
   )
}
export default Index;

Method 3: inline style

// page file in pages
import styles from "./index.modules.scss"
const Index = () => {
   return (
       <>
         <h2 className={styles.xxxx}>Module import</h2>
         <h2 style={{color: 'green'}}>Inline style</h2>
       </>
   )
}
export default Index;

Method 4: jsx mode

// page file in pages
import styles from "./index.modules.scss"
const Index = () => {
   return (
       <>
         <h2 className={styles.xxxx}>Module import</h2>
         <h2 style={{color: 'green'}}>Inline style</h2>
         <p>jsx way</p>
         <style jsx>{`
            {
                p {
                    color: blue;
                }
            }
         `}</style>
          // There is also a form that sets the global style
          <style global jsx>{`
            {
                body {
                    background: #000;
                }
            }
         `}</style>
       </>
   )
}
export default Index;