ng→next

Estilização

O Angular tem um sistema de encapsulamento CSS embutido via ViewEncapsulation. O Next.js oferece múltiplas abordagens — CSS Modules, Tailwind, CSS global — todas com escopo diferente.

ViewEncapsulation vs. CSS Modules

O equivalente mais direto do styles: [] do Angular são os CSS Modules — arquivos .module.css que isolam automaticamente os estilos por componente:

Angularbutton.component.ts
// Angular — CSS encapsulado por componente
@Component({
  selector: 'app-button',
  standalone: true,
  template: `<button class="btn">{{ label }}</button>`,
  styles: [`
    .btn {
      background: #6366f1;
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
    }
    .btn:hover {
      background: #4f46e5;
    }
  `],
  // ViewEncapsulation.Emulated (padrão) —
  // adiciona atributo único para isolar estilos
  encapsulation: ViewEncapsulation.Emulated,
})
export class ButtonComponent {
  @Input() label = 'Clique';
}
Next.jsButton.tsx + Button.module.css
/* Button.module.css */
.btn {
  background: #6366f1;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.btn:hover {
  background: #4f46e5;
}

/* --------------------------------- */
/* Button.tsx */
import styles from "./Button.module.css";

type Props = { label?: string };

export default function Button({ label = "Clique" }: Props) {
  // styles.btn → nome único em runtime (ex: Button_btn__xKf3a)
  return <button className={styles.btn}>{label}</button>;
}

Classes dinâmicas: [ngClass] vs. className

O [ngClass] tem equivalente direto em JSX. Para casos complexos, a biblioteca clsx oferece a mesma DX:

Classes condicionais

Angular
<!-- Classes dinâmicas no Angular -->
<div
  [ngClass]="{
    'active': isActive,
    'error': hasError,
    'disabled': isDisabled
  }"
  [class.loading]="isLoading"
>
  Conteúdo
</div>

<!-- Estilo inline dinâmico -->
<div [style.color]="textColor" [style.fontSize.px]="fontSize">
  Texto colorido
</div>
Next.js
// Classes dinâmicas no Next.js

// Template literals (simples)
<div
  className={[
    "base-class",
    isActive ? "active" : "",
    hasError ? "error" : "",
  ].filter(Boolean).join(" ")}
>
  Conteúdo
</div>

// Com a lib 'clsx' (recomendado — npm install clsx)
import clsx from "clsx";

<div
  className={clsx("base-class", {
    active: isActive,
    error: hasError,
    disabled: isDisabled,
  })}
>
  Conteúdo
</div>

// Estilo inline
<div style={{ color: textColor, fontSize: fontSize + "px" }}>
  Texto colorido
</div>

Tailwind CSS

Este projeto já usa Tailwind CSS v4 — é a abordagem mais comum no ecossistema Next.js. Em vez de escrever CSS separado, você aplica classes utilitárias diretamente no JSX:

Button.tsx
// Tailwind CSS — utilitários inline
// Já configurado neste projeto!

type ButtonProps = {
  label: string;
  variant?: "primary" | "secondary";
};

export default function Button({
  label,
  variant = "primary",
}: ButtonProps) {
  return (
    <button
      className={
        variant === "primary"
          ? "bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
          : "bg-zinc-100 hover:bg-zinc-200 text-zinc-800 px-4 py-2 rounded-lg font-medium transition-colors"
      }
    >
      {label}
    </button>
  );
}
✓
No Angular, você provavelmente usa classes do Bootstrap ou Angular Material. No Next.js com Tailwind, você compõe utilities diretamente no elemento. A curva é pequena para quem vem de Bootstrap: py-2 = padding-top: 0.5rem; padding-bottom: 0.5rem.

Estilos globais

Angularstyles.scss (+ angular.json)
/* styles.scss — Angular */
/* Importado em angular.json */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: #fafafa;
  margin: 0;
}

/* Variáveis globais */
:root {
  --primary: #6366f1;
  --surface: #ffffff;
}

/* Para "furar" o encapsulamento */
::ng-deep .third-party-component {
  color: red;
}
Next.jsapp/globals.css (+ layout.tsx)
/* app/globals.css — Next.js */
/* Importado em app/layout.tsx */

@import "tailwindcss"; /* Tailwind v4 */

:root {
  --primary: #6366f1;
  --surface: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #09090b;
  }
}

body {
  font-family: var(--font-geist-sans), sans-serif;
}

/* Para sobrescrever lib de terceiros */
.third-party-component {
  color: red;
}
/* Não há ::ng-deep — CSS global funciona normalmente */
ℹ
No Next.js não existe o ::ng-deep. Para sobrescrever estilos de bibliotecas externas, simplesmente use seletores CSS globais em globals.css ou CSS Modules com :global(.class).

Comparativo de abordagens

CSS Modules

styles: [] + ViewEncapsulation.Emulated

Padrão do Next.js. Arquivo .module.css colocado com o componente. Escopo automático.

Melhor para: Componentes com estilos específicos, migração de Angular styles

Tailwind CSS

Bootstrap + classes utilitárias

Utilitários CSS. Configurado neste projeto. Sem arquivos CSS separados.

Melhor para: Desenvolvimento rápido, UIs responsivas, design systems

CSS Global

styles.scss no angular.json

app/globals.css importado no layout. Funciona como styles.scss do Angular.

Melhor para: Reset, variáveis CSS, estilos de bibliotecas terceiras

CSS-in-JS (styled-components, emotion)

Não tem equivalente direto

Estilos em JavaScript. Requer 'use client' ou configuração especial com SSR.

Melhor para: Temas dinâmicos, componentes altamente reutilizáveis

✓
Recomendação: Para novos projetos Next.js, use Tailwind CSS para a maioria dos estilos e CSS Modules para componentes que precisam de estilos muito específicos ou complexos. Evite CSS-in-JS com SSR a menos que seja necessário — requer configuração extra.

Referências: CSS — Next.js Docs ↗ · Tailwind CSS Docs ↗ · Component Styling — Angular Docs ↗

← AnteriorFormulários