# styled components

12개의 포스트

styled components

styled components 란?

2020년 2월 14일
·
0개의 댓글

(TIL 17일차) React (7)

React Sass CSS-moudles styled-components

2020년 2월 13일
·
0개의 댓글

styled-components

styled-components? .js파일에 css를 넣을 수 있도록 해주는 편리한 라이브러리 (CSS-in-JS 라이브러리 라고 부른다고 함) 로 다운받을 수 있음 usage 다음처럼 .js파일에서 import 사용법은 위와 같음. 변수 안에 집어넣는데, .div부분은 .input, .button등등으로 바꿀 수 있음 그리고 안에는 css코드를 ...

2020년 2월 5일
·
0개의 댓글

CSS vs SASS vs styled Component - FE study13

1. CSS >Cascading Style Sheet : 웹의 디자인을 담당(표준) App.js App.css 해당 js 파일에 css파일을 import 해서 사용. > 특징 : 메뉴얼적인 방법으로 직접 Class , ID 네이밍하며 작성한다. 사용법이 간단함. 하지만 요소들이 많아질수록 관리가 힘들어지고 직관성이 떨어짐. 2. SASS > Synt...

2020년 1월 23일
·
0개의 댓글

react에서 styled components 사용시 input tag에서 focus를 잃어버리는 문제

react에서 styled components를 적용하기 시작하였습니다. styled components를 input tag에 적용하여 사용하던 도중 input의 onChange()함수에서 state를 변경하였습니다. 하지만 컴포넌트에서 매 입력시마다 input에서의 focus를 잃어버리는 일이 발생하였는데요. 그 원인과 해결에 대하여 기록합니다. ...

2020년 1월 15일
·
2개의 댓글

ant Design + styled-component

웹팩으로 헬로우 리액트를 빌드한 가정하에 이어서 Ant Design을 붙여서 여러가지 사용해보겠습니다. 웹팩으로 리액트 사용하기 ant design 설치 styled-components 설치 ant design 테마를 커스터마이징 ├── package.json ├── script │   └── generate-less-var.js ├── src │  ...

2019년 12월 19일
·
0개의 댓글
post-thumbnail

styled-components 사용해보기

react는 SPA(Single Page Application)로 css파일을 적용하면 모든 화면에서 적용이 되어 class 나 id 명을 세밀하게 구분해주어야한다. 그래서 styled-components 라이브러리를 사용하면 내가 만들 컴포넌트에 임의의 class 를 생성해주어 스타일을 적용시켜준다. styled-components 사용해보기 로 R...

2019년 12월 12일
·
0개의 댓글

[next.js] styled components 스타일이 적용전에 렌더가 되는 문제 해결법

styled components 스타일이 적용전에 렌더가 되는 문제 해결법 Install next.js Add styled-components add babel plugin and .bablerc file 루트 파일에 .babelrc 파일 만들기 .babelrc Create the _document.js file pages 폴더 아래에 _doc...

2019년 11월 2일
·
0개의 댓글

next.js에 Styled Components 적용을 위한 .babelrc 설정

프로젝트의 최상위 경로에 .babelrc 파일을 생성하고 다음 내용을 입력한다.

2019년 10월 30일
·
0개의 댓글

리액트 Styled Componets - 2편

Tag의 속성을 변경하는 방법 attrs 를 이용해서 태그의 속성을 변경할 수 있다. mixin(스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 기능) styled-components 의 css 메소드를 이용해 style을 정의하고 변수로 추가해 주었다. ThemeProvider 를 이용해서 React Child component까지 ...

2019년 3월 2일
·
0개의 댓글

리액트 Styled Components - 1편

Styled Components 란? 설치 $ npm install --save styled-components 사용법 (methods) styled 객체 안에 'styled-components'를 import 해주고, Button 변수에 styled.button 방식으로 html button 태그를 css와 함께 담아준다. 마지막에 backgrou...

2019년 2월 28일
·
0개의 댓글
post-thumbnail

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 요즘은 조금 불편하다고 느껴져서 잘 사용하고 있지 않고 있습니다.

2018년 10월 21일
·
24개의 댓글