JSX编译标注
在前面的示例中可以看到，使用与React搭配的方式时，需要在源文件的首行添加一行/** @jsx jsx */。这行编译标注是用来利用React 17新加入的JSX转换来用Emotion提供的JSX转换函数替代React自身的createElement转换的。
React 17在React的包中引入了两个接口，这些接口只会被Babel和Typescript等编译器使用，在这种情况下，JSX将不会被直接转换成React.createElement，而是会从这两个新接口中获取函数调用。
Emotion要求源文件首行添加的/** @jsx jsx */，可以将jsx babel plugin配置为使用Emotion提供的jsx函数。这个编译标注实际上就是@babel/plugin-transform-react-jsx插件提供的Runtime更换功能，其中@jsx就是用于指示更换JSX转译函数的。比如/** @jsx Preact.h */可以将JSX的转换交由Preact提供的h方法来完成。
如果项目使用的是Create React App 4.0以上的版本，那么就可以直接在源文件的首行添加编译标注就可以了。但是如果已经添加的编译标注不起作用，那么就需要将编译标注更换为/** @jsxImportSource @emotion/react */。
如果项目使用Vite来作为构建工具，那么在JSX源文件中就不需要再添加编译标注了，你可以参考之前介绍Vite的章节来配置Emotion的编译。
在添加了编译标注以后，还是需要使用import { jsx } from '@emotion/react'来指定编译标注中所指示使用的JSX转换函数的。
另外，在搭配Typescript使用Emotion的时候，IDE和编辑器常常会提示无法找到和验证css函数。这个问题可以在Typescript配置的compilerOptions中添加配置项'jsxImportSource': '@emotion/react'来解决。