리액트 타입스크립트 css, sass, styled-components

리액트 컴포넌트를 스타일링할 때 여러 가지 방법 있다.

css : html에서 기본적으로 사용하는 방법
sass : 확장된 css 로 작성하고 컴파일해서 사용
styled-components : 자바스크립트 안에 스타일 작성

개인적으로는 styled-components 이 가장 좋아 보였다.

정의한 스타일을 컴포넌트 처럼 사용 가능하다.
props를 넘겨줄 수 있어서 상황에따라 마음데로 조절가능하다. 잘 쓰면 코드를 많이 줄일 수 있을듯 하다.
react native 에서도 사용할 수 있다.

# 공식사이트
https://styled-components.com/

# 참고
https://github.com/rebassjs/rebass

https://github.com/styled-components/awesome-styled-components

# vs code 확장 프로그램
styled-components를 그냥 사용하면 코드 하이라이트가 안된다. 설치하면 잘 보임
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

 

import styled, { StyledFunction } from 'styled-components';
 
 
// props 를 미리 정의할 수 있다
interface ButtonProp{
 myColor?:string;
}
 
interface GreenButtonProp{
 myFontColor?:number;
}
 
// props 를 바로 정의해서 넘겨줄 수 있다
const StyledButton = styled.button<{bgColor?:string}>`
 background:  ${props => props.bgColor || 'blue'};
`
 
// 이미 정의한 props 넘기기
const MyButton = styled.button<ButtonProp>`
 background:  ${props => props.myColor || 'blue'};
 &:hover{
   background:gray;
 }
`
 
// 상속 비슷하게 쓸 수 있다. 한번 더 정의하면 override 처럼 됨
const MyGreenButton = styled(MyButton)<GreenButtonProp>`
 background: green; 
`;
 
function App() { 
 return (
   <>
     { /* pink 버튼이 나옴 */ }
     <StyledButton bgColor='pink'>테스트</StyledButton>
     { /* pink 빨간색 버튼이 나옴 */ }
     <MyButton myColor='red'>테스트</MyButton>
     { /* pink 초롤색 버튼이 나옴 */ }
     <MyGreenButton myColor='blue'>테스트</MyGreenButton>
   </>
);
}
 
export default App;