vite에서 감정 CSS 소품을 사용하는 방법.
감정이 있는 요소의 스타일을 지정하는 주요 방법은 CSS 소품입니다.
vite 프로젝트에서 css prop을 사용하려면 먼저 설치하십시오@emotion/babel-plugin.
여기에
이제 반응 앱에서 css prop을 사용할 수 있습니다.
프로젝트에서 TypeScript를 사용하는 경우 먼저
그런 다음 형식화된 CSS 소품을 사용하려면
const Component = () => {
return (
<div
css={{
backgroundColor: "hotpink",
"&:hover": {
color: "lightgreen",
},
}}
>
This has a hotpink background.
</div>
);
};
1. 종속성 설치
vite 프로젝트에서 css prop을 사용하려면 먼저 설치하십시오@emotion/babel-plugin.
yarn add -D @emotion/babel-plugin
2. vite.config.js 업데이트
여기에
@emotion/babel-plugin
to @vitejs/plugin-react babel 옵션을 추가합니다. 또한 css prop을 사용하려면 jsx
를 jsxImportSource
로 설정하여 감정의 @emotion/react
기능을 사용하도록 vite에 지시해야 합니다.import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [
react({
jsxImportSource: "@emotion/react",
babel: {
plugins: ["@emotion/babel-plugin"],
},
}),
],
});
이제 반응 앱에서 css prop을 사용할 수 있습니다.
타입스크립트
프로젝트에서 TypeScript를 사용하는 경우 먼저
"jsxImportSource": "@emotion/react"
파일에 tsconfig.json
를 추가하십시오.{
"compilerOptions": {
// ...
"jsxImportSource": "@emotion/react"
}
}
그런 다음 형식화된 CSS 소품을 사용하려면
vite-env.d.ts
./// <reference types="vite/client" />
/// <reference types="@emotion/react/types/css-prop" />