# styled components
styled-components
styled-components? .js파일에 css를 넣을 수 있도록 해주는 편리한 라이브러리 (CSS-in-JS 라이브러리 라고 부른다고 함) 로 다운받을 수 있음 usage 다음처럼 .js파일에서 import 사용법은 위와 같음. 변수 안에 집어넣는데, .div부분은 .input, .button등등으로 바꿀 수 있음 그리고 안에는 css코드를 ...
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...
react에서 styled components 사용시 input tag에서 focus를 잃어버리는 문제
react에서 styled components를 적용하기 시작하였습니다. styled components를 input tag에 적용하여 사용하던 도중 input의 onChange()함수에서 state를 변경하였습니다. 하지만 컴포넌트에서 매 입력시마다 input에서의 focus를 잃어버리는 일이 발생하였는데요. 그 원인과 해결에 대하여 기록합니다. ...
ant Design + styled-component
웹팩으로 헬로우 리액트를 빌드한 가정하에 이어서 Ant Design을 붙여서 여러가지 사용해보겠습니다. 웹팩으로 리액트 사용하기 ant design 설치 styled-components 설치 ant design 테마를 커스터마이징 ├── package.json ├── script │ └── generate-less-var.js ├── src │ ...
styled-components 사용해보기
react는 SPA(Single Page Application)로 css파일을 적용하면 모든 화면에서 적용이 되어 class 나 id 명을 세밀하게 구분해주어야한다. 그래서 styled-components 라이브러리를 사용하면 내가 만들 컴포넌트에 임의의 class 를 생성해주어 스타일을 적용시켜준다. styled-components 사용해보기 로 R...
[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...
next.js에 Styled Components 적용을 위한 .babelrc 설정
프로젝트의 최상위 경로에 .babelrc 파일을 생성하고 다음 내용을 입력한다.
리액트 Styled Componets - 2편
Tag의 속성을 변경하는 방법 attrs 를 이용해서 태그의 속성을 변경할 수 있다. mixin(스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 기능) styled-components 의 css 메소드를 이용해 style을 정의하고 변수로 추가해 주었다. ThemeProvider 를 이용해서 React Child component까지 ...
리액트 Styled Components - 1편
Styled Components 란? 설치 $ npm install --save styled-components 사용법 (methods) styled 객체 안에 'styled-components'를 import 해주고, Button 변수에 styled.button 방식으로 html button 태그를 css와 함께 담아준다. 마지막에 backgrou...
다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components
리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 요즘은 조금 불편하다고 느껴져서 잘 사용하고 있지 않고 있습니다.