CSS

Next.js 学习笔记 /

内置支持

Styled JSX
CSS Modules
SASS / SCSS

也可以混用其他

Styled Components
Emotion

Styled JSX

基础

<style jsx>{`
  …
`}</style>

变量

<style jsx>{`
body {
  color: ${props.color};
}
`}</style>

全局

<style jsx global>{`
  …
`}</style>

CSS Modules

[name].module.css
[name].module.scss
[name].module.sass

全局 CSS

新建 _app.tsx

import "../styles/globals.css";

import type { AppProps } from "next/app";
import * as React from "react";

const MyApp = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />;
};

export default MyApp;

clsx

<div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >

tailwind

nextjs.org/learn/basics/assets-met...

本文章首发在 LearnKu.com 网站上。

CSS

Styled JSX

基础

变量

全局

CSS Modules

全局 CSS

clsx

tailwind

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

CSS

Styled JSX

基础

变量

全局

CSS Modules

全局 CSS

clsx

tailwind

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录