emotion 을 사요해 보자

motion 라이브러리는 CSS-in-JS 라이브러리이며, React 컴포넌트의 스타일링을 쉽게 관리할 수 있도록 도와준다. 이 라이브러리는 JSX 문법을 사용하여 css를 적용할 수 있도록 지원합니다. Emotion의 css 함수를 사용하면 JSX 요소에 직접 CSS 스타일을 적용할 수 있음!

• import {css} from "@emotion/react";
• css={csswidth:100%}형태로 작성

css 함수 를 써서 style 속성과 유사하게 작성 가능 이 함수는 템플릿 리터럴을 사용하여 CSS 스타일을 정의할 수 있도록 해줍니다.

props 로 넘어온 값 추가하기 or css 함수 작성 후 추가

• css를 쓰고 뒤에 css 를 입력한다
• background-color:${backColor};로 값 추가

css 함수를 여러개 배열로 추가

typescript 에서 문제 발생시!

:Property 'css' does not exist on type css 키워드 입력시 빨간줄 문제 발생시!

• 해결 tsconfig.json 에 값 추가

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

추가시 해결

참조

https://xionwcfm.tistory.com/316#%F0%9F%A4%A1%EB%AA%A8%EB%8B%AC%20%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-1 https://velog.io/@remon/React-Emotion-%EC%84%A4%EC%B9%98-%ED%9B%84-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%98%88%EC%A0%9C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 https://velog.io/@favorcho/Emotion-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0