你好。本次我们将在Next.js（13.4.6 / 2023年6月最新版）+ TypeScript的环境中介绍使用Emotion作为一种CSS in JS的方案时的步骤，作为备忘录记录下来。

本次的环境

导入的包如下所示。

├── @types/node@20.3.1
├── @types/react-dom@18.2.5
├── @types/react@18.2.12
├── eslint-config-next@13.4.6
├── eslint@8.43.0
├── next@13.4.6
├── react-dom@18.2.0
├── react@18.2.0
└── typescript@5.1.3

安装 Emotion 是 @emotion/react 的 11.11.1 版本。

安装情感

使用以下命令安装@emotion/react。

以下指令可用于安装@emotion/react。

npm install --save @emotion/react

在tsconfig.json中添加jsxImportSource

仅安装无法正常运行。请按以下示例，在tsconfig.json的compilerOptions中添加jsxImportSource项目。

{
    "compilerOptions" {
    ...
    "jsxImportSource": "@emotion/react",
    ...
    }
}

这样，安装就完成了。

试着亲自使用一下

如前所述，Emotion是一种使CSS in JS成为可能的库。顾名思义，它允许将CSS代码直接写在JavaScript（或TypeScript）文件中。

之前

假设有以下的组件，它仅用于显示文本。本次的目标是将文本的颜色设为红色。

export default function Title(){
    return (
        <div>
            <h1>This is Title</h1>
        </div>
    )
}

在之后

通过使用Emotion在JS中进行CSS样式化，会得到以下结果。（一例）

import { css } from "@emotion/react"

export default function Title(){
    return (
        <div>
            <h1 css={titleStyle}>This is Title</h1>
        </div>
    )
}

const titleStyle = css ({
    color: `red`,
})

请给我提供您的参考资料。

以上是关于在Next.js+TypeScript环境中引入Emotion的内容。
非常感谢您的阅读！