A stílus és a felhasználói felület testreszabása itt Next.js: CSS felfedezése Module, Styled

Ebben a részben azt fogjuk megvizsgálni, hogyan szabhatja testre alkalmazása stílusát és felhasználói felületét olyan Next.js technikák segítségével, mint a CSS module, styled-components, és más UI-könyvtárak. Alkalmazásunkhoz egy tetszetős és interaktív felületet készítünk.

CSS használata Module

A CSS Module egy olyan technika, amely lehetővé teszi független és helyi CSS osztályok létrehozását az egyes összetevők megjelenésének testreszabásához. Íme egy példa a CSS használatára Module itt Next.js:

Hozzon létre egy CSS-fájlt a következő formátumú névvel {componentName}.module.css: .

Használja a CSS-modul fájljában generált CSS-osztályokat a React összetevői között:

import styles from './Button.module.css';  
  
function Button() {  
  return <button className={styles.button}>Click me</button>;  
}  

Használata Styled Components

Styled Components lehetővé teszi a CSS írását közvetlenül a React összetevőibe JavaScript szintaxis használatával. Íme egy példa a Styled Components használatára Next.js:

Telepítés styled-components:

npm install styled-components

Használja styled-components az összetevők stílusához:

import styled from 'styled-components';  
  
const Button = styled.button`  
  background-color: #007bff;  
  color: #ffffff;  
  padding: 10px 20px;  
  border: none;  
  border-radius: 5px;  
`;  

Egyéb felhasználói felületi könyvtárak használata

module A CSS és a mellett styled-components olyan UI könyvtárakat is használhat, mint például a Material-UI, Ant Design vagy Chakra UI az alkalmazás felületének gyors és professzionális testreszabásához.

Következtetés

Ez a rész bemutatja az Next.js alkalmazás stílusának és felhasználói felületének testreszabását olyan technikák segítségével, mint a CSS module, styled-components, és más UI-könyvtárak. Ezen technikák alkalmazásával vonzó és interaktív felületet hozhat létre alkalmazásához.