css in js 有很多写法，此前主要接触的是 styled 写法，但这个写法不太习惯，也需要额外的 IDE 插件支持。emotion 的 css props 则相当于拓展了原生 style 标签，没有任何心智负担，也不影响现有项目的样式模式，可以无缝接入。

https://emotion.sh/

css props 写法

<div
  css={{
    backgroundColor: 'red',
    '&:hover': {
      color: 'yellow'
    }
  }}
>
  鼠标移入后变色
</div>

vite 设置

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
  ],
});

eslint 配置

{
  "rules": {
    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
  }
}

TypeScript 配置

compilerOptions 中设置：

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"