# styled components

486개의 포스트
post-thumbnail

[Next.js] Next.js `className` did not match

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

약 22시간 전
·
0개의 댓글
·
post-thumbnail

스타일드 컴포넌트 및 폰트 설정

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

2일 전
·
0개의 댓글
·
post-thumbnail

can't resolve 'styled-components' (feat : npm --save)

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

3일 전
·
0개의 댓글
·
post-thumbnail

Next.js에서 styled-component 설정부터 사용하기까지 (+ TypeScript)

Next에서 Styled-compoents를 사용하는 방법을 알아보자! (+ TypeScript)

4일 전
·
0개의 댓글
·
post-thumbnail

[TypeScript] 타입스크립트에서 Styled-components 애니메이션 재활용하기

SCSS mixin 기능처럼 Styled-component에서 애니메이션 재활용하기🏃

4일 전
·
0개의 댓글
·
post-thumbnail

[CSS] 💅styled-components의 ThemeProvider 사용법🌉

react에서 styled-components에 있는 ThemeProvider를 사용하여 다크모드를 만들 수 있다.

4일 전
·
0개의 댓글
·
post-thumbnail

styled components

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

2023년 3월 22일
·
0개의 댓글
·
post-thumbnail

react-native animation

0 -> 100 을 만드는 건데1\. AnimatedBox를 만들고2\. AnimatedBox에 움직이는 설정을 style={{transform: {translateY: Y}}} 로3\. 그 Y의 기초값 0은 const Y = new Animated.Value(0)

2023년 3월 20일
·
0개의 댓글
·

React + styled-components 설정 & global style & ThemeProvider 적용

https://kyounghwan01.github.io/blog/React/styled-components/basic/

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

백오피스 개발일지 [3] - 스타일 재사용

모듈 재사용을 늘려 중복되는 코드를 줄이면서 책임은 유지하는 방법을 알아본다.

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

styled components - As, Attrs

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

2023년 3월 15일
·
0개의 댓글
·
post-thumbnail

button 안의 svg 파일 color 바꾸기 (fill이 적용되지 않는 경우)

button gifbutton 안에 svg 파일과 text를 넣고, click 유무에 따라 색을 바꿔주는 작업을 했다.button 하나를 바꾸는 작업이라면 쉽게 할 수 있었지만, button을 모듈화하여 작업하다보니 index.tsx와 styles.ts로 파일을 나눠서

2023년 3월 14일
·
0개의 댓글
·

[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

2023년 3월 12일
·
0개의 댓글
·
post-thumbnail

NextJS styled-components 설정

SSR을 위한 styled-components 설정

2023년 3월 11일
·
0개의 댓글
·
post-thumbnail

jest react-testing-library에서 styled-component Theme 적용하기

미니 프로젝트를 진행하는데 Styled-Components를 써서 css를 적용하는데ThemeProvider를 통해 공통 스타일 속성을 사용해 일관성 있게 컴포넌트를 스타일링하고다크모드를 사용하고 있었다.위 코드의 ThemeProvider는 다크모드 적용때문에 한번 더

2023년 3월 9일
·
0개의 댓글
·

CSS 장단점

순수 css 모듈각 파일 별로 안정성을 보장해준다.고립성과 독립성이 보장되어 이름 충돌에 걱정하지 않아도 된다.JS에서 CSS를 작성할 수 있다.JS가 꼭 필요하므로 변경될 때마다 재컴파일 되어야 한다.고립성과 독립성이 보장되고 js, css 파일을 왔다갔다 하지 않아

2023년 3월 7일
·
0개의 댓글
·

Styled-Components 완전정복

styled-components는 css-in-js 형태로 리액트 컴포넌트 내에서 스타일링 할 수 있는 라이브러리이며 따로 css module을 생성하지 않아도 된다는 장점이 있다. (개인적으로 이 방식이 가장마음에 든다) 우선 설치부터 typescript에서 오류없이

2023년 3월 6일
·
0개의 댓글
·