1. Styled Componets 만들기와 재활용
- const 컴포넌트이름 = styled.태그종류
스타일 - const 컴포넌트이름 = styled(제활용할컴포넌트이름)
스타일
- BlueBtn 만들기
- BleBtn 재활용=> RedBtn 만들기
- BleBtn 재활용=> BigBtn 만들기
2. Props 활용하기
- const 컴포넌트이름 = styled.태그종류
CSS속성:${(props)=>함수코드}
ex) const Btn=styled.button
bagkground:${(props)=>props.skyblue?"skyblue:"white"}
: 삼항연산자를 통해 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를 주고 없을경우 white를 지정해주는 코드
- GlobalStyle 만들어서 import하기
- 전체 버튼 스타일에 앞서 GrobalStyle 적용
- Btn 1 : 속성x
- Btn 2 : 속성o
- 속성에 따라 다르게 랜더링(styled component 만들때 삼항연산식 사용)
3. createGlabalStyle
전체 스타일을 적용하고 싶을 때!
위의 예시를 보면 GlobalStyle을 따로 컴포넌트로 만들어서 적용해준 것을 볼 수 있다.
마찬가지로 함수를 사용해 CSS파일에서 작성하듯 설정해주고 싶은
스타일을 다른 파일에 작성하고,
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
border-color: white;
}
`;
export default GlobalStyle;
APP.js()에 임포트한다.
import GlobalStyle from "./GrobalStyle";
이렇게 만들어진 컴포넌트를 최상위 컴포넌트에 사용해주면 전역에 GlobalStyle 컴포넌트의 스타일이 적용된다!
Hello world!