반응형
- introduction
- install
styled-components 문법- Global styled
SSR- Theming
Tooling / Packages
1. introduction
yarn add @emotion/styled @emotion/react
- css prop 지원
- SSR에서 따로 설정을 필요로 하지 않는다
- Theme 사용 가능
- ESLint plugin 설정이 되어 있다
- @emotion/styled 는 styled.div 스타일을 사용할 수 있게 한다
2. install
yarn add --dev @emotion/babel-plugin
- optimizes styles by compressing and hoisting 하여 더 좋은 개발자 경험을 선사한다
// .babelrc
{
"env": {
"production": {
"plugins": ["@emotion", ...otherBabelPlugins]
}
},
"plugins": ["@emotion"]
}
3. styled-components 문법
4. Global styled
// global.ts
import { css } from "@emotion/react";
export const global = css``;
// _app.tsx
import { Global } from "@emotion/react";
import type { AppProps } from "next/app";
import global from "../global";
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Global styles={global} />
<Component {...pageProps} />
</>
);
}
export default MyApp;
5. SSR
6. Theming
// theme.ts
import { Theme } from "@emotion/react";
const theme: Theme = {
colors,
fonts,
};
export default theme;
// _app.tsx
import { ThemeProvider } from "@emotion/react";
import type { AppProps } from "next/app";
import theme from "../theme";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
여기서 그치면 안 되고, TS와의 호환성을 위해 tsconfig.json에 import 설정을 추가해야 한다
// tsconfig.json
{
...
"jsxImportSource": "@emotion/react",
...
}
7. Tooling / Packages
반응형
'Web.d' 카테고리의 다른 글
[CSS] 웹 앱의 사용성 높이기 (10) | 2022.09.02 |
---|---|
[Storybook][React] Storybook 기초 적용해보기 (2) | 2022.05.10 |
[React][Context] Prop drilling 과 useContext (2/2) (1) | 2022.03.30 |
[Javascript] React 와 불변성의 관계 요약정리 (1) | 2022.03.29 |
[React][Webpack] webpack, babel 로 시작하기 (without CRA) (0) | 2022.03.20 |