# styled components

[Next.js] Next.js `className` did not match
개발을 하던 도중 이런식으로 에러가 뜨면서 스타일드 컴포넌트로 만든 컴포넌트가 스타일링이 적용이 안되는 에러가 생겼다.Next.js에서 styled-components를 사용할 때 \_document를 따로 설정해서 SSR될 때 CSS가 head에 주입되도록 해야 한다

스타일드 컴포넌트 및 폰트 설정
를 \_document.tsx에 입력한 후에 바벨을 설정할 수 있는 .babelrc를 만들고 수정실제 적용이 되었는지를 확인하기 위해 index.tsx를 변경해줌잘 적용된 것을 확인스타일드 컴포넌트는 템플릿 리터럴을 사용하기 때문에 \`\`안에 css 및 scss코드를

can't resolve 'styled-components' (feat : npm --save)
Next.js프로젝트에 tailwind와 styled-components 설치 후 서버를 실행시켰더니can't resolve 'styled-components'can't not find modules 모듈을 찾을 수 없다는 에러발생.뭐지 순정버전으로도 깔아줘야되나 싶어

Next.js에서 styled-component 설정부터 사용하기까지 (+ TypeScript)
Next에서 Styled-compoents를 사용하는 방법을 알아보자! (+ TypeScript)

[TypeScript] 타입스크립트에서 Styled-components 애니메이션 재활용하기
SCSS mixin 기능처럼 Styled-component에서 애니메이션 재활용하기🏃

[CSS] 💅styled-components의 ThemeProvider 사용법🌉
react에서 styled-components에 있는 ThemeProvider를 사용하여 다크모드를 만들 수 있다.

styled components
styled components는 javascript에서 css를 사용할 수 있도록 도와주는javascript 라이브러리다.

react-native animation
0 -> 100 을 만드는 건데1\. AnimatedBox를 만들고2\. AnimatedBox에 움직이는 설정을 style={{transform: {translateY: Y}}} 로3\. 그 Y의 기초값 0은 const Y = new Animated.Value(0)
React + styled-components 설정 & global style & ThemeProvider 적용
https://kyounghwan01.github.io/blog/React/styled-components/basic/

styled components - As, Attrs
오늘의 한마디 > As as을 사용하여 엘리먼트를 다른 엘리먼트로 교체할 수 있습니다. Attrs 반복되는 태그들의 속성을 일일이 추가하지말고 한번에 속성값을 추가하는데 요긴하다.

button 안의 svg 파일 color 바꾸기 (fill이 적용되지 않는 경우)
button gifbutton 안에 svg 파일과 text를 넣고, click 유무에 따라 색을 바꿔주는 작업을 했다.button 하나를 바꾸는 작업이라면 쉽게 할 수 있었지만, button을 모듈화하여 작업하다보니 index.tsx와 styles.ts로 파일을 나눠서
[Error] Uncaught Error: Invalid hook call.
styled component를 적용시킨 후, npm start를 했을 때 에러가 발생했다.발생한 에러는 다음과 같다.Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a

jest react-testing-library에서 styled-component Theme 적용하기
미니 프로젝트를 진행하는데 Styled-Components를 써서 css를 적용하는데ThemeProvider를 통해 공통 스타일 속성을 사용해 일관성 있게 컴포넌트를 스타일링하고다크모드를 사용하고 있었다.위 코드의 ThemeProvider는 다크모드 적용때문에 한번 더
CSS 장단점
순수 css 모듈각 파일 별로 안정성을 보장해준다.고립성과 독립성이 보장되어 이름 충돌에 걱정하지 않아도 된다.JS에서 CSS를 작성할 수 있다.JS가 꼭 필요하므로 변경될 때마다 재컴파일 되어야 한다.고립성과 독립성이 보장되고 js, css 파일을 왔다갔다 하지 않아
Styled-Components 완전정복
styled-components는 css-in-js 형태로 리액트 컴포넌트 내에서 스타일링 할 수 있는 라이브러리이며 따로 css module을 생성하지 않아도 된다는 장점이 있다. (개인적으로 이 방식이 가장마음에 든다) 우선 설치부터 typescript에서 오류없이