Next.js 学习笔记CSS
内置支持
- 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',
})}
>
关于 LearnKu
粤公网安备 44030502004330号