styled components 가 없으면 global style을 styles.css로 넣거나, css 모듈을 만들거나, 태그에 직접 style을 적용해주어야 한다.
그러나 styled components를 사용하면 더 편리하게 style을 적용할 수 있다.
우선
npm i styled-components
를 통해 설치해준다.
다음으로 app.js에서 styled components를 import 해준다.
import styled from "styled-components";
그런 다음에 요소별로 다음과 같이 스타일을 적용한다.
styled.태그명
반드시 유효한 태그명이어야 한다.
const Box = styled.div`
background-color: red;
width: 100px;
height: 100px;
`
styled.div`` 백틱 사이에는 css 문법과 동일하게 적는다.
'개발 > react' 카테고리의 다른 글
TypeScript는 개발자의 실수를 막아준다! (0) | 2022.11.13 |
---|---|
Styled components 상속받기를 통해 중복을 줄인다! (0) | 2022.11.12 |
react로 api 호출해서 화면에 표시하기!! (0) | 2022.10.03 |
react의 useEffect는 api call 할 때 많이 사용!! (0) | 2022.09.26 |
react에서 to-do-list 만들기는 바닐라 js에 비해 너무 쉬움!! (0) | 2022.09.26 |