Tinkinkite stilių ir vartotojo sąsają Next.js: tyrinėkite CSS Module, Styled

Šiame skyriuje išnagrinėsime, kaip tinkinti programos stilių ir vartotojo sąsają Next.js naudojant tokius metodus kaip CSS module, styled-components, ir kitos vartotojo sąsajos bibliotekos. Sukursime vizualiai patrauklią ir interaktyvią mūsų programos sąsają.

Naudojant CSS Module

CSS Module yra technika, leidžianti sukurti nepriklausomas ir vietines CSS klases, kad būtų galima pritaikyti atskirų komponentų išvaizdą. Štai pavyzdys, kaip naudoti Module CSS Next.js:

Sukurkite CSS failą pavadinimu formatu {componentName}.module.css.

Naudokite CSS klases, sugeneruotas CSS modulio faile React komponentuose:

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

Naudojant Styled Components

Styled Components leidžia rašyti CSS tiesiai į „React“ komponentus naudojant „JavaScript“ sintaksę. Styled Components Štai naudojimo pavyzdys Next.js:

Įdiegti styled-components:

npm install styled-components

Naudokite styled-components savo komponentams stilizuoti:

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

Naudojant kitas vartotojo sąsajos bibliotekas

Be CSS module ir styled-components, taip pat galite naudoti vartotojo sąsajos bibliotekas, pvz. Material-UI, Ant Design, , arba Chakra UI greitai ir profesionaliai tinkinti savo programos sąsają.

Išvada

Šioje skiltyje supažindino su programos stiliaus ir vartotojo sąsajos tinkinimu Next.js naudojant tokius metodus kaip CSS module, styled-components, ir kitos vartotojo sąsajos bibliotekos. Taikydami šiuos metodus galite sukurti patrauklią ir interaktyvią savo programos sąsają.