跳到主要内容

样式

CSS Module​

导入 CSS Module​

import styles from "./styles.module.css";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <section className={styles.dashboard}>{children}</section>;
}

全局样式​

  • css 命名为 app/global.css；
  • root layout 导入 css module；
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}
// These styles apply to every route in the application
import "./global.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Tailwind CSS​

  • 详见 [[020_tailwindcss]]；

CSS in JS​

next 现状​

  • next 目前仅支持 client component 使用 css in js 相关样式库；